CSS Transitions/Transform - изображение «shaky» в браузере google chrome

Question

Недавно я столкнулся с «shaky», скорее всего, вызванным переходом CSS. На самом деле это происходит только на Браузер Chrome (возможно, также Safari как и некоторые ppl также сообщил об этом). Любая идея, как я могу заставить ее выглядеть гладкой? Кроме того, вы можете заметить, что некоторые белые блоки появляются несколько раз, это также не произошло, прежде чем я применил переходы и теперь происходит один или два раза после того, как страница будет загружена только недавно.

Вот ссылка, так что вы можете увидеть, что именно происходит:https://vimeo.com/198493320

CSS код переходов:

.heroEffects .bg { 
    transform: scale(1); 
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 
.bgimg { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    background-repeat: no-repeat; 
    background-position: center center; 
    transform: scale(1); 
    overflow: hidden; 
    -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85); 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-image: url("../img/gallery/slonecz.jpg"); 
    animation-name: backgroundchangeFadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    -webkit-animation-name: backgroundchangeFadeInOut; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 15s; 
} 

Answer 1

На самом деле, я только что узнал несколько способов сделать он работает нормально. Прежде всего, добавив -webkit-transform-style: preserve-3d; Правило к мерцающему элементу заставляет его работать немного немного, но в моем случае это не сработало после этого (источник: https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit).

Что на самом деле работал на меня, был увеличение анимации, длительность правила от 10 секунд до 15 секунд, и вместо 3-ступенчатого перехода я поставил следующее:

@keyframes backgroundchangeFadeInOut { 
    0% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    15% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    30% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    45% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
    50% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    65% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    80% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    95% { 
     background-image: url("../img/gallery/motyl.jpg"); 
    } 
    100% { 
     background-image: url("../img/gallery/slonecz.jpg"); 
    } 
} 

Похоже, один перехода взятия много времени заставляет память браузера терпеть неудачу и мерцать. Быстрый переход и отображение исходных изображений между переходами подходит для меня. Надеюсь, что кто-то с такой проблемой также проверит это, чтобы мы могли увидеть, является ли это многозадачным решением.

Кроме того, в случае белых блоков он оказался тело показывая на какой-то причине, временно измененное тело фон непрозрачности до 0, пока я не выработают другой способ решить эту проблему.