Javascript “第一次狩猎时的抖动/跳跃（臭虫？）”；焦点“；页面加载事件

我目前正在与Safari上的一个非常令人沮丧的bug作斗争，我不知道还能去哪里

似乎会触发

聚焦事件的大多数元素（但不是全部，我看不出区别因素）都会导致页面上所有被转换或设置动画的元素向顶部和左侧跳跃~2px。这只发生在页面加载后的第一个焦点事件上

看到这个bug有点烦人，因为它位于的登录部分，我完全无法在JSFIDLE上提取出一个更简单的例子

如果您拥有/创建了帐户并登录，请单击此编辑图标进行删除：


你会在页面的第一个焦点上看到，东西抖动。这是一个时间线，当页面上出现一个下拉列表时，我会将注意力集中在一个有问题的元素上：


滴得越多，效果就差不多了，但看起来最多可以滴40滴左右。而且探查器并没有显示任何邪恶的东西。只需浏览jQuery内部

如果不是通过
translate3d
或
matix3d
来布置元素，而是简单地使用
top
和
left
，那么这个bug就会消失。经过数小时的调试，我完全不知所措

希望有人见过类似的东西，可以看看，或者可以给我下一步调试的建议

非常感谢

更新：Dave Desandro这是3d加速，所以我用
translate
试了试，果然没有引起抖动。我不知道为什么硬件加速会触发一个
focus
事件，而且只有一次

我曾尝试在页面加载上设置transformZ为0，以继续提升硬件，但也没有成功。欢迎更多想法。
我在使用自定义字体工具包时遇到过这种情况。这可能是问题所在吗？某些事件会导致自定义字体重新绘制，这可能会导致页面显示出现非常轻微的“抖动”

有时，手动设置所有父HTML元素的高度和宽度可以减少闪烁。
我知道这个问题是前一段时间发布的，这有点牵强，但下面是：

或许可以从chrome开始，看看复合层：

在地址栏中输入以下内容：
关于：旗帜

您将能够从其中启用复合边框。红色边框通常表示渲染问题：


我时不时发现，尽管Chrome中存在渲染问题，但浏览器可以很好地处理这些问题，并将其隐藏起来。然而，在其他基于webkit的浏览器中，结果可能更为明显（即android）

我还看到，当z索引与正在转换的内容一起使用时，会出现闪烁

无论哪种方式，如果知道您是如何解决这个问题的（如果您这样做的话），那就太好了。也许可以为您自己的问题发布一个答案？
我很久以前就遇到过这个问题，老实说，我不记得确切的原因是什么，但以下是我遵循的一些步骤：

检查下一行中的同一元素是否没有hide（）和show（），反之亦然。
例子：
el.show（）
el.hide（）

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

对于不需要焦点事件的元素，请在脚本底部添加以下代码：
noFocusElem.off（'focus'）
这将确保删除您可能错误添加的任何焦点处理程序

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

希望这有帮助：）
一种避免花费时间修复加载时间抖动的方法；您可以将页面设置为隐藏，然后使元素在加载时可见。如果页面加载缓慢，您可能希望将微调器默认设置为可见，然后让加载隐藏它。然后，当你没有更好的事情做的时候，你可以回到这个问题上来。
只是我的价值

我要尝试的第一件事：
首先在chrome中，点击“about:flags”（是的，我知道你没有使用chrome）。找到“合成渲染层边界”并将其启用。打开此功能后，您将大致了解渲染/硬件加速的内容

见：

并查找任何渲染问题。这些通常是由z索引引起的。使用任何z索引并隐藏/显示某些元素，直到渲染问题得到解决。然后从那里开始工作。平移-z攻击和不透明度也会导致问题

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

其次：查看焦点事件本身，并尝试防止默认行为。对我来说这似乎是一个很长的机会，但试一试。
我还没有测试过这个，所以如果它能工作，我会非常惊讶。。。但这里有一个想法：

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

我最近遇到了同样的问题，在我的案例中找到了解决方法

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

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

从3d加速元素（包括子元素）中删除这些元素的任何实例都会阻止我将内容转移到焦点上。
你的Safari版本是什么？刚刚查看了Safari 5.1.4-看起来不错。我知道webkit中有几个与动画和变换相关的bug，但它们与文本渲染/反对齐有关，而不是矩阵位置；有趣的是，我也在5.1.4上，我知道它正在5.2上发生；关于这些因素？试一试。不幸的是，隐藏背面可见性也没有帮助。你说抖动的元素是s