在页面加载的第一个“焦点”事件Safari浏览器抖动/跳跃（bug？）

我目前正在对付Safari上令人沮丧的错误，我不知道还有什么可以转身的。

看起来会触发focus事件的大多数元素（但不是全部，也不能识别区分因素）会导致页面上所有被转换或animation的元素跳转到顶部和左侧〜2px。 这只发生在页面加载后的第一个焦点事件上。

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

如果你有/创build一个账户并login，点击这个编辑图标进行删除：

你会看到，在页面的第一个焦点，事情抖动。 下面是时间线，当页面上有一个单独的下拉菜单时，我将焦点放在一个有问题的元素上：

随着更多的下降，它只是更多的相同，但似乎最多约40个油漆。 而剖析器并没有暗示任何有害的东西。 只是通过jQuery内部旅行。

如果不是通过translate3d或matix3d来布局元素，我只需要使用top和left ，这个bug就会消失。 经过几小时和几个小时的debugging，我完全失去了。

希望有人看到类似的东西，可以看看，或者可以给我build议debugging下一步。

非常感谢！

更新：戴夫德桑德罗build议这是3D加速踢，所以我试着用一个translate来代替，果然，这并没有造成抖动。 我不知道为什么硬件加速会通过focus事件引发，只有一次。

我已经尝试在页面加载中设置一个0的transformZ，继续增加硬件，但在那里也没有运气。 欢迎任何更多的想法。

Answer 1

我已经有一段时间了这个问题，老实说，我不记得究竟是什么原因，但这是我遵循的一些步骤：

检查你没有hide（）和show（）作为下一行中的相同元素，反之亦然。 例如：el.show（）el.hide（）

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

对于不想要焦点事件的元素，将这些代码添加到脚本的底部： noFocusElem.off('focus'); 这将确保删除您可能错误添加的任何焦点处理程序

最后把你的CSS放在任何脚本之前。 这是一个众所周知的事实，即在应用内联样式后添加css规则可能会导致抖动，特别是如果您使用line-hight属性

希望这可以帮助 ：）

Answer 2

使用自定义字体套件时发生这种情况。 这可能是问题吗？ 某些事件会导致自定义字体重新绘制，这会导致页面显示中出现如此轻微的“抖动”。

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

Answer 3

我知道这个问题是前一段时间发布的，这是一个远射，但是这里有：

也许作为一个起点回到铬看看复合层：

点击这个地址栏：关于：标志

您将能够从那里启用复合边界。 红色边框通常表示呈现问题：

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

我不时发现的是，虽然在Chrome浏览器中存在渲染问题，但是浏览器能够很好地隐藏它们。 在其他基于webkit的浏览器，但结果可以更通知（即android）。

当z-index与被转换的内容一起使用时，我也看到了闪烁。

无论哪种方式，知道你是如何解决这个问题的（如果你这样做的话）是很好的。 也许可以回答你自己的问题？

Answer 4

避免花费时间来确定加载时间抽搐的方法; 您可以将页面设置为隐藏，然后使用加载方式使元素可见。 如果您的网页加载速度较慢，则可能需要将微调控件默认为可见，然后加载隐藏它。 那么当你没有更好的事情时，你可以回到这个问题上来。

Answer 5

只是我的2c值得。

我会尝试的第一件事：首先在Chrome中，在“about：flags”中敲击（是的，我知道你没有使用Chrome）。 find“合成渲染图层边框”并将其打开。 一旦这个function打开，你会得到什么是渲染/硬件加速大致的想法。

请参阅： http ： //www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

并寻找任何渲染问题。 这些通常是由z索引引起的。 玩弄任何Z索引，并隐藏/显示某些元素，直到渲染问题得到解决。 然后从那里工作。 translate-z黑客和不透明也会导致问题。

根据经验，我发现其他webkit浏览器中的渲染问题可以使用chrome进行诊断。 闪存是股票android浏览器上的常见现象。

其次：看看焦点事件本身，并尝试像防止默认行为。 看起来像是一个长镜头，但给它一个去。

Answer 6

我没有testing过这个，所以如果它能工作，我会感到非常惊讶……但是这里有一个想法：

 $(document).ready(function() { $(document).focus(function(e) { e.preventDefault(); }); $(document).click(function() { $(document).unbind(); }); }); 

Answer 7

我最近遇到了同样的问题，并发现了一些在我的情况下修复它。

检查隐藏在屏幕外的任何内容，例如：

 text-indent: -9999px; left: -9999px; 

从3D加速元素（包括子元素）中移除任何这些元素的实例都会停止内容跳跃。