渲染Safari中的文本移动问题

Question

我正在这个网站上工作，标题根据鼠标光标的X轴位置左/右移动。标题绝对位于其容器中，通过css转换，通过Javascript应用'translateX'值。

一切正常，但在Safari上偶尔出现渲染问题，移动文本的渲染似乎回显并落后，正如您在this screenshot中看到的那样。出于某种原因，这只发生在文本从右向左移动时。甚至更奇怪的是，它似乎只发生在字母K的向下笔划的底部。

如果有人知道可能导致这种情况的原因，那将会是一个很大的帮助。

以下是该网站的链接： http://staging-kaplan.matthiasdeckx.be/

提前致谢。

Answer 1

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

选项包括：

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

2. 通过设置.o-banner__animate

来扩展padding: 0 .05em

3. 使用.o-banner__animate overflow: hidden

剪断K的腿

我更喜欢＃2。