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);
}

IE 11 css翻译问题，闪烁

1 个答案: