css - IE 11 css 翻译问题，闪烁

Question

所以我有一个 .scrollable-sections 的 div，上面有下面的样式，但是当涉及到在 IE 11 中翻译这个 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);
}

Answer 1

希望下面的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);
}