IE 11 css翻译问题，闪烁
IE 11 css翻译问题，闪烁
提问于 2018-03-27 17:40:31
所以我有一个带有以下样式的.scrollable-sections的div，但是在IE11中翻译这个div时(这是通过向.scrollable-sections的父类添加一个类来完成的)，由于某种原因，当它必须转换时，它会闪烁白色，这不是一个平滑的过渡。
我已经收集了其他答案，这就是为什么我试图强制进行3d转换并添加背面-可见性。
我已经别无选择了，因为我还能尝试什么来阻止ie11中的这种小故障。
有人能帮上忙吗？
.scrollable-sections {
position: relative;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 500ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out,
-moz-transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0%, 0);
-moz-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
will-change: "transform transition";
}
.viewport.js-translateX1 .scrollable-sections{
transform: translate3d(0, -100%, 0);
}回答 1
Stack Overflow用户
发布于 2018-03-27 18:06:14
我希望下面的css能帮助你。我已经在你的css中更新了一些css代码。
.scrollable-sections {
position:absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 500ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out,
-moz-transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
will-change: "transform transition";
}
.viewport.js-translateX1 .scrollable-sections{
transform: translate3d(0, 0, 0);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49509432
复制相关文章
相似问题
腾讯云开发者
