Question

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

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

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

我在此codepen上重现了这个问题：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

1 个答案: