Ошибка только с Safari

Question

Я создал компонент React, который динамически меняет фон из 4 делений в бесконечном цикле, каждый раз, когда он меняет фон, есть анимация CSS, запускаемая с помощью класса переключения.

Чтобы получить все изображения,Я использую функцию Webpack 'require.context' в паре с url-загрузчиком, чтобы получить массив URL-адресов данных base64, чтобы использовать их в качестве нового источника для фона.

То, как я это сделалработает как положено в Chrome (69.0.3497.100), Opera (56.0.3051.43) и Firefox (62.0.3).Но это не очень хорошо работает в Safari (12.0), я вижу некоторые «глюки».

Когда я проверяю страницу, я вижу, что анимация срабатывает правильно, но после нее появляются изображения,и иногда изображение не видно.

Другое странное поведение заключается в том, что оно воздействует на фиксированный элемент, который находится над разделом, содержащим элементы div, они мигают.

Я записал проблему, поэтому вымогу понять, что я имею в виду: https://www.youtube.com/watch?v=EO-9Ks-FhOo

Здесь также есть промежуточная версия.http://ferrarism.at/today/staging

Вот мой компонент 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);
    })();
}
}

Вот мой компонент, скомпилированный css:

.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); 
}

Уже несколько часов я ищу решение, ноЯ ничего не нашел.Если у вас есть идеи, не стесняйтесь!

Answer 1

[FIX] Добавление transform: translate3D(0,0,0) к родительскому элементу решило проблему

Answer 2

[EDIT] Только что попытался сделать это с PHP, я столкнулся с той же проблемой, что и с React, так что теперь я почти уверен, что это проблема, связанная с CSS.

Это происходит с этим свойством Css:

transform: rotateX(-180deg)

Если я использую:

transform: rotateZ(-180deg)

вместо rotateX, больше нет "глюков", но я бы хотел, чтобы он был на rotateX.Использование TweenMax может быть правильным вариантом, верно?(У меня уже есть GSAP в качестве зависимости)