在页面加载的第一个“焦点”事件上，Safari抖动/跳跃（错误？）

Question

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

似乎大多数元素（但不是全部，而且我无法辨别差异化因素）会触发focus事件会导致页面上所有转换过的元素或动画向左上方跳~2px。这只发生在页面加载后的第一个焦点事件上。

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

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

你会看到在页面的第一个焦点，事情抖动。这是页面上有一个下拉的时间线，我触发了一个有问题的元素：

随着更多滴，它只是更多相同，但似乎最多约40个油漆。而探查者并没有暗示任何邪恶的东西。只需通过jQuery内部访问。

如果不是通过translate3d或matix3d放置元素，而是简单地使用top和left，这个错误就会消失。经过几个小时的调试后，我完全失去了。

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

非常感谢！

更新：Dave Desandro suggested这是3D加速开始的，所以我尝试用translate代替，但果然，这并没有导致抖动。我不知道为什么硬件加速会发生focus事件，但只有一次。

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

Answer 1

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

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

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

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

最后在任何脚本之前放置你的CSS。事实上，在应用内联样式后添加css规则可能会导致抖动，尤其是在使用行高的属性时

希望这会有所帮助：）

Answer 2

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

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

Answer 3

我知道这个问题是在不久前发布的，这是一个很长的镜头但是这里有：

也许作为一个起点回到chrome并查看复合分层：

点击进入地址栏： 约：标志

您可以从那里启用复合边框。红色边框通常表示渲染问题：

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

我不时发现的是，尽管Chrome中存在渲染问题，但浏览器可以很好地防范它们。在其他基于webkit的浏览器中，结果可能更加明显（即android）。

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

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

Answer 4

避免花时间修复加载时间抽搐的方法;您可以将页面设置为隐藏，然后使用加载使元素可见。如果您的页面加载速度很慢，您可能希望将微调器默认为可见，然后加载隐藏它。那么当你没有更好的事情可以回到这个问题上时。

Answer 5

只是我的2c值。

我会尝试的第一件事： 首先是chrome，重击'about：flags'（是的，我知道你没有使用Chrome）。找到'Composited渲染图层边框'并将其打开。打开此功能后，您将大致了解正在渲染的内容/硬件加速。

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

并寻找任何渲染问题。这些通常由z索引引起。使用任何z索引并隐藏/显示某些元素，直到解决渲染问题。然后从那里工作。 translate-z hacks和opacity也会导致问题。

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

其次：看看焦点事件本身并尝试阻止默认行为。对我来说似乎是一个很长的镜头但是试一试。

Answer 6

我没有对此进行过测试，所以如果有效的话我会非常惊讶......但是这里有一个想法：

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

Answer 7

我最近遇到了同样的问题，并在我的案例中找到了修复它的东西。

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

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

从3d加速元素（包括子元素）中删除这些内容的任何实例都会停止内容跳转对焦。