Hice un componente React que cambia dinámicamente el fondo de 4 divs en un bucle infinito, cada vez que cambia el fondo, hay una animación css activada con una clase de alternancia.

Para obtener todas las imágenes, estoy usando la función Webpack 'require.context' emparejada con el cargador de URL para tener una matriz de URL de datos base64 para usarlas como la nueva fuente para el fondo.

La forma en que lo hice funciona como se esperaba en Chrome (69.0.3497.100), Opera (56.0.3051.43) y Firefox (62.0.3). Pero no funciona bien en Safari (12.0), puedo ver algunos "fallos".

Cuando inspecciono la página, puedo ver que la animación se activa correctamente, pero las imágenes aparecen después y, a veces, la imagen no es visible.

Otro comportamiento extraño, es que afecta a elementos fijos que están encima de la sección que contiene los divs, estos están parpadeando.

Grabé el problema para que puedas ver lo que quiero decir: https://www.youtube.com/watch?v=EO-9Ks- FhOo

También hay una versión provisional aquí. http://ferrarism.at/today/staging

Aquí está mi componente React:

import React from "react"



function importAll(r) {
return r.keys().map(r);
}

const imageArray = importAll(require.context('../img/clients', true));



export default class ClientReel extends React.Component {
constructor(props){
    super(props);
    this.state = {
        images: imageArray
    }
}
render(){
    const {images} = this.state



    var count;
    const randomClient = [];

    for (count = 1; count <= 4; ++count) {
        var i = Math.floor((Math.random() * (images.length - count)) + 1);
        randomClient.push(images[i]);
        images[i] = images[images.length - count];
    }

    const ImagesToRender = randomClient.map((item, i) => {
            return (
                <div key={i} className="clientReel-item">
                    <div className="itemImage" style={{ background: `url(${item}) center center / 100% no-repeat` }}></div>
                </div>
            )
    })
    return(
        <React.Fragment>
            {ImagesToRender}
        </React.Fragment>
    )
}

componentDidMount(){
    const {images} = this.state
    const reelItemImage = document.querySelectorAll(".itemImage")
    const reelItems = document.querySelectorAll(".clientReel-item")
    var i = 0;
    var f = 0;

    var timing = 500;
    (function loop() {
        setTimeout(function () {
            reelItems[i].classList.toggle("reelFlip")
        }, timing - 100)
        if (f < (images.length - 1)) {
            f++;
            reelItemImage[i].style.background = "url(" + images[f] + ") center center / 100% no-repeat"
        } else {
            f = 0;
            reelItemImage[i].style.background = "url(" + images[f] + ") center center / 100% no-repeat"
        }
        if (i < (reelItems.length - 1)) {
            i++;
        } else {
            i = 0;
        }
        setTimeout(loop, timing);
    })();
}
}

Aquí está mi componente css compilado:

.section__client-reel .wrapper #clientReel .clientReel-item {
    flex-basis: 21.739%;
    height: 91px;
    margin: 18px 0;
    transform: rotateX(0deg);
    transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1); 
}

.section__client-reel .wrapper #clientReel .clientReel-item .itemImage {
      width: 100%;
      height: 100%; 
}

.section__client-reel .wrapper #clientReel .reelFlip {
    transform: rotateX(-180deg);
    -webkit-transform: rotateX(-180deg);
    transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.3, 1, 0.3, 1);
 }

.section__client-reel .wrapper #clientReel .reelFlip .itemImage {
      transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg); 
}

Han pasado horas buscando una solución pero no encontré nada. Si tienes alguna idea, ¡siéntete libre!

0
Mathieu Ferraris 16 oct. 2018 a las 15:54

2 respuestas

La mejor respuesta

[REPARAR] Agregar transform: translate3D(0,0,0) al elemento principal resolvió el problema

0
Mathieu Ferraris 16 oct. 2018 a las 14:28

[EDITAR] Intenté hacerlo con PHP, encontré exactamente el mismo problema que con React, así que ahora estoy casi seguro de que es un problema relacionado con CSS.

Sucede con esta propiedad de Css:

transform: rotateX(-180deg)

Si utilizo:

transform: rotateZ(-180deg)

En lugar de rotateX no hay más "fallas" Pero me gustaría tenerlo en rotateX. Usar TweenMax podría ser una opción válida, ¿verdad? (Ya tengo GSAP como dependencia)

0
Mathieu Ferraris 16 oct. 2018 a las 14:20