在 MS 边缘滚动中断变换 css

Question

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

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

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

我在这个 codepen 上重现了这个问题：http://codepen.io/glalloue/pen/JbNZPK（或后面的 sn-p）。
要对其进行测试，请尝试删除列表中的 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>