使用CSS Grid和Transform实现的闪卡在Safari与Firefox中滚动异常

问题现象 #

使用CSS Grid布局结合3D Transform制作闪卡时，正面内容的overflow: scroll效果存在跨浏览器差异：

• Chrome：正反两面均可正常滚动
• iPhone Safari：正面无法滚动，背面正常
• Firefox：正面仅能拖动滚动条滚动，背面正常

问题根源 #

浏览器对未设置自身Transform属性、仅依赖backface-visibility: hidden的Grid子元素，在滚动事件捕获上存在兼容性问题。背面元素因设置了rotateY(-180deg)，被浏览器纳入3D渲染上下文，滚动事件处理正常；而正面元素无自身Transform，导致触摸/鼠标滚动事件无法被正确识别。

解决方案 #

给正面元素添加一个不影响视觉效果的微小Transform，强制浏览器将其纳入3D渲染上下文，从而修复滚动交互问题。推荐使用rotateY(0deg)或translateZ(1px)，两者均不会改变元素视觉表现。

修改后的代码 #

CSS部分 #

.falshcard-wrapper {
  width: 400px;
  perspective: 1000px;
  color: white;
}

.falshcard {
  display: grid;
  height: 100px;
  transform-style: preserve-3d;
  transition-duration: 500ms;
  transition-property: transform;
}

.falshcard.flipped {
  transform: rotateY(-180deg)
}

.front,
.back {
  grid-column: 1;
  grid-row: 1;
  overflow: auto;
  backface-visibility: hidden;
}

.front {
  background: red;
  /* 添加不影响视觉的transform，触发3D渲染上下文 */
  transform: rotateY(0deg);
  /* 或使用 translateZ(1px) 效果一致 */
  /* transform: translateZ(1px); */
}

.back {
  background: blue;
  transform: rotateY(-180deg)
}

HTML部分 #

<div class="falshcard-wrapper">
  <div class="falshcard ">
    <div class="front">
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    </div>
    <div class="back">
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

<button id="flip" style="margin: 20px">
  Flip
</button>

JS部分 #

document.getElementById("flip").onclick = () => {
   document.querySelector(".falshcard").classList.toggle('flipped');
}

验证效果 #

修改后，各浏览器表现一致：

• Chrome：正反两面正常滚动
• iPhone Safari：正反两面均可触摸滚动
• Firefox：正反两面均可通过鼠标滚轮/拖动滚动条滚动

内容的提问来源于stack exchange，提问作者Constantin.FF