在页面加载的第一个"焦点"事件上,Safari抖动/跳跃(错误？)

Question

我目前在Safari上遇到一个非常令人沮丧的错误,我不知道还有什么地方可以转.

似乎触发事件的大多数元素(但不是全部,我无法辨别差异因素)focus将导致页面上所有转换或动画的元素跳转到顶部和左侧〜2px.这只发生在页面加载后的第一个焦点事件上.

看到这个bug有点烦人,因为它位于droplr.com的登录部分,而且我完全无法在JSFiddle上提取更简单的案例.

如果您有/创建帐户并登录,请单击此编辑图标以获取删除:

你会看到在页面的第一个焦点,事情抖动.这是时间线,当页面上有一个单一的下降,我触发焦点在一个有问题的元素:

随着更多的下降,它只是更多相同,但似乎最多约40个油漆.而探查者并没有暗示任何邪恶的东西.只是通过jQuery内部之旅.

如果不是通过translate3d或者放置元素matix3d,我只是使用top和left,这个bug消失了.经过几个小时的调试,我完全失去了.

希望有人看到类似的东西,可以看看,或者可以给我关于调试后续步骤的建议.

非常感谢!

更新:戴夫Desandro 建议这是3D加速,所以我用一个translate相反的尝试,但果然,这不会导致抖动.我不知道为什么硬件加速会focus发生事件,但只有一次.

我已经尝试在页面加载时将transformZ设置为0以继续并提升硬件,但也没有运气.欢迎任何更多的想法.

Answer 1

我在使用自定义字体套件时就遇到过这种情况。这可能是问题所在吗？某些事件会导致自定义字体重新绘制，这可能会导致页面显示出现轻微的“抖动”。

有时，手动设置所有父 HTML 元素的高度和宽度可以减少闪烁。