Safari：在 iframe 内容中移动 1 个像素：悬停动画

Question

Safari 特定：

我有一个页面，它只是一个以 iframe 为中心的背景。 iframe 在 :hover 上使用变换动画，这会导致 iframe 内容向左移动 1 个像素，仅在 Safari 中（在 Chrome 和 Firefox 中测试）。

我不确定是什么导致 Safari 这样做。

• 我的 iframe 是宽度：100%，所以大概框架本身不是 转移，只有内容。

• 移位只持续动画的持续时间，而不是悬停。

• 转移不会在 iframe 内容的来源页面上发生，仅在 iframe 内显示一次。

有人在 Safari 中遇到过这个问题吗？

存在 Safari 问题的页面：http://www.bladesnpc.com/index-02.html

iframe 内的内容：https://perchance.org/blades-npc

Answer 1

我正在使用 flex 管理元素居中。将 flex-direction 更改为 column 解决了 Safari 问题 - 尽管此特定修复仅适用于我将页面上的单个元素居中。