我目前正在Safari上解决一个非常令人沮丧的错误,但我不知道该向何处求助。
似乎触发focus
事件的大多数元素(但不是所有元素,我无法区分其差异)都会导致页面上所有进行过过渡或动画效果的元素向上和向左跳动约2像素。而这只在页面加载后第一次聚焦时发生。
看到这个错误有点烦人,因为它在droplr.com的登录部分中,我完全无法将其简化为JSFiddle的更简单的案例。
如果您拥有/创建帐户并登录,请单击此下拉列表的编辑图标:
您将看到在页面第一次聚焦时出现抖动。以下是在页面上有单个drop并且我在一个问题元素上触发焦点时的时间轴:
当有更多的drops时,情况就变得越来越相同,但似乎最多只有40次绘制。而且分析器没有发现任何恶意行为。只是通过jQuery内部的一次旅行。
如果我不使用translate3d
或matix3d
对元素进行布局,而是简单地使用top
和left
,这个错误就会消失。经过数小时的调试,我已经完全无法解决这个问题了。
希望有人看到过类似情况,能够帮忙查看或给出下一步调试的建议。
非常感谢!
更新:Dave Desandro 建议 这是3D加速机制导致的,于是我尝试使用translate
进行测试,果然没有出现抖动。但我不知道为什么硬件加速会在focus
事件中触发,并且只触发一次。
我已经尝试在页面加载时设置transformZ为0以加快硬件加速,但是没有成功,欢迎提供更多想法。