css - Safari上的CSS翻转卡闪烁和损坏的滚动

Question

我有一张翻转卡片，可以在正面和背面显示内容。前面的内容决定了卡片的高度。卡片背面应与正面高度相同。如果高度不够，则需要滚动。

一个codepen示例在这里 https://codepen.io/rumbletumble/pen/OJmJGBL

此卡在 Chrome、Firefox 和 Edge 上似乎可以正常运行。

但是，在 Safari 上会出现以下问题（在 Safari 14.1.1（15611.2.7.1.6、15611）和 iPhone 12 Pro Max 14.4 模拟器中测试）

1. 在过渡开始时，背面意外地变得可见

2. 背面的滚动内容不会滚动（使用鼠标滚轮）。在 PC 上，可以单击和拖动滚动条，但在移动设备上，这将不起作用。

我试过了

• -webkit-overflow-scrolling: touch;
• 使用溢出-y的各种组合：自动/滚动
• 按照这篇文章的建议添加 translateZ 。翻转卡虫 Safari
• 确保所有 -webkit- 前缀都已就位

任何帮助表示赞赏。

标签： csssafaricss-transitionscss-transforms