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

Question

我目前正在与 Safari 上的一个非常令人沮丧的错误作斗争，我不确定还能转向哪里。

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

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

如果您拥有/创建一个帐户并登录，请单击此编辑图标进行下拉:

您会在页面的第一个焦点上看到抖动。下面是页面上有一个拖放并且我触发了对违规元素的关注时的时间线:

随着掉落次数的增加，情况变得更加相似，但似乎最多可以使用 40 种涂料。而且探查器没有提出任何恶意的建议。 jQuery 内部结构之旅。

如果不是通过 translate3d 或 matix3d 放置元素，我只是使用 top 和 left，这个错误消失了。经过数小时的调试，我完全不知所措。

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

非常感谢!

更新:戴夫·德桑德罗 suggested这是 3d 加速启动的原因，所以我用 translate 进行了尝试，果然，这并没有引起抖动。我不知道为什么硬件加速会通过 focus 事件启动，而且只有一次。

我已经尝试在页面加载时将 transformZ 设置为 0 以继续并提升硬件，但也没有成功。欢迎提出更多想法。

Answer 1

我有一段时间遇到过这个问题，老实说，我不记得到底是什么原因，但这里是我遵循的一些步骤:

检查下一行中的同一元素是否没有 hide() 和 show()，反之亦然。例子:el.show()隐藏()

将自定义字体更改为“Arial”

对于不需要焦点事件的元素，在脚本底部添加以下代码:noFocusElem.off('焦点');这将确保删除您可能错误添加的所有焦点处理程序

最后将您的 css 放在任何脚本之前。众所周知，在应用内联样式后添加 css 规则可能会导致抖动，尤其是当您使用 line-hieght 属性时

希望这有帮助:)