最近我遇到了“不稳定”屏幕,这很可能是由 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;
}
最佳答案
实际上,我只是发现了几种让它正常工作的方法。 首先,将 -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,直到我找到另一种解决方法
关于CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41525457/