MS 边缘上的滚动中断变换 css

Question

单击按钮时我有一个翻转 div。
在这个翻转 div 上，我有一个滚动列表。

如果列表不滚动（因为没有足够的项目），一切正常好的。
但是，如果滚动列表，项目会消失...

问题不会出现在 Chrome 和 Safari 浏览器上。
我认为这是与 transform animation 的兼容性问题，但我不确定。

我在这个代码笔上重现了这个问题：http://codepen.io/glalloue/pen/JbNZPK（或后面的代码片段）。
要对其进行测试，请尝试删除列表中的 2 项，它会正常工作...如果您放入 4 项，一切都会坏掉。

有解决办法吗？

document.getElementById("btn-front").addEventListener("click", function(){
  document.getElementById("flip").className = "flipped";
});

document.getElementById("btn-back").addEventListener("click", function(){
    document.getElementById("flip").className = "";
});

#flip {
  transform-style: preserve-3d;
 transition: transform 1s;
 transform: translate3d(0, 0, 0);
  transform-origin: 150px 150px 0;
}

#front {
  background-color: red;
  transform: translate3d(0px, 0px, 2px);
}

#back {
  background-color: green;
  transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
#back .button {
  margin: 25px 50px 25px 50px;
}

.tile {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  backface-visibility: hidden;
}

.button {
  height: 30px;
  width: 100px;
  margin: 75px 50px;
}

#flip.flipped {
 transform: translate3d(0, 0, 0) rotateY(-180deg);
}

#list {
  height: 120px;
  margin: auto;
  text-align: center;
  font-size: 40px;
  overflow-x: hidden;
}

<div id="flip">
  <div id="front" class="tile">
    <button id="btn-front" class="button">Go to back</button>
  </div>
  <div id="back" class="tile">
    <button id="btn-back" class="button">Go to front</button>
    <div id="list">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
      <div class="item">item 4</div>
    </div>
  </div>
</div>

Answer 1

发生这种情况是因为 backface-visibility: hidden;，因为您将 background 赋予 #back backface 将不可见。所以你可以删除 backface-visibility: hidden;

.tile {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
  /*backface-visibility: visible;*/
}

document.getElementById("btn-front").addEventListener("click", function() {
  document.getElementById("flip").className = "flipped";
});

document.getElementById("btn-back").addEventListener("click", function() {
  document.getElementById("flip").className = "";
});

#flip {
  transform-style: preserve-3d;
  transition: transform 1s;
  transform: translate3d(0, 0, 0);
  transform-origin: 150px 150px 0;
}
#front {
  background-color: red;
  transform: translate3d(0px, 0px, 2px);
}
#back {
  background-color: green;
  transform: translate3d(0px, 0px, 1px) rotateY(180deg);
}
#back .button {
  margin: 25px 50px 25px 50px;
}
.tile {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50px;
  left: 50px;
}
.button {
  height: 30px;
  width: 100px;
  margin: 75px 50px;
}
#flip.flipped {
  transform: translate3d(0, 0, 0) rotateY(-180deg);
}
#list {
  height: 120px;
  margin: auto;
  text-align: center;
  font-size: 40px;
  overflow-x: hidden;
}

<div id="flip">
  <div id="front" class="tile">
    <button id="btn-front" class="button">Go to back</button>
  </div>
  <div id="back" class="tile">
    <button id="btn-back" class="button">Go to front</button>
    <div id="list">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
      <div class="item">item 4</div>
    </div>
  </div>
</div>

MS 边缘上的滚动中断变换 css

Scrolling break transform css on MS edge

html

css

overflow

css-transforms

microsoft-edge