javascript - 在 Safari 中移动文本时呈现问题

Question

我在这个网站上工作，标题根据鼠标光标的 X 轴位置左右移动。标题绝对定位在它们的容器中，移动发生在 css 转换中，通过 Javascript 应用“translateX”值。

一切正常，但在 Safari 上偶尔会出现渲染问题，移动文本的渲染似乎回显并滞后，如您在 this screenshot 中所见。 .出于某种原因，这只会在文本从右向左移动时发生。更奇怪的是，它似乎只出现在字母 K 向下笔画的底部词干处。

如果有人知道是什么导致了这种情况，那将是一个很大的帮助。

这是网站的链接: http://staging-kaplan.matthiasdeckx.be/

提前致谢。

Answer 1

字母 K 的下划线超出了符号边界。这会导致 Safari 中的渲染错误。

选项是:

1. 改变字体。选择一个没有溢出字母的。

2. 通过设置 padding: 0 .05em 扩展 .o-banner__animate

3. 用.o-banner__animate 切开K的腿 overflow: hidden

我更喜欢#2。