CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像

Question

最近我遇到了“不稳定”屏幕，这很可能是由 CSS 转换引起的。事实上，它只发生在 Chrome 浏览器 上(可能还有 Safari，因为一些人也报告了它)。知道如何让它看起来光滑吗？此外，您可能会注意到几次出现奇怪的白色 block ，这在我应用转换之前也没有发生，现在在页面重新加载后发生一两次。

这是一个链接，您可以查看到底发生了什么: 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 ).

真正对我有用的是将 animation-duration 规则从 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");
   }
}

似乎单个转换花费大量时间会导致浏览器内存出现故障和闪烁。快速过渡和在过渡之间显示原始图像对我来说很有用。希望遇到此类问题的人也能检查一下，以便我们了解它是否是多案例解决方案。

此外，如果出现白色 block ，由于某种原因它似乎是 body，暂时将 body 背景不透明度更改为 0，直到我找到另一种解决方法