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）。

实际上对我有用的是将动画持续时间规则从10s增加到15s，而不是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");
   }
}

似乎只需要花费很长时间的单个转换会导致浏览器内存失败并闪烁。快速过渡并在过渡之间显示原始图像对我来说很有用。希望有这样问题的人也会检查这个问题，以便我们可以看看它是否是多路径解决方案。

此外，在白色方块出现由于某种原因出现 body 的情况下，暂时将身体背景不透明度更改为0 ，直到我找到另一种解决方法它

CSS Transitions / Transform - 谷歌浏览器中的“抖动”图像

1 个答案: