CSS 전환/변형 - Google 크롬 브라우저의 "흔들린"이미지

Question

최근에 나는 "흔들린" 화면이 CSS 전환으로 인한 것일 수 있습니다. 사실 Chrome 브라우저에서만 발생합니다 (아마도 Safari도 일부보고 한 바 있습니다). 어떻게하면 부드럽게 보이게 할 수 있습니까? 또한 이상한 흰색 블록이 몇 번 나타날 수 있습니다. 전환이 적용되기 전에 발생하지 않았으며 페이지가 새로로드 된 후 이제 한 두 번 발생합니다. 전환의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). 사실 나를 위해 일한 무엇

은 15 초에 10 초에서 애니메이션 기간 규칙을 증가했고, 대신 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 어떤 이유로 게재 몸 인 것으로 나타났다.