Safari 中文本移动的渲染问题

Question

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

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

如果有人知道是什么原因造成的，那将是一个很大的帮助。

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

提前致谢。

Answer 1

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

选项有：

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

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

3. 用.o-banner__animateoverflow: hidden割断K的腿

我更喜欢#2。