37

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

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

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

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

在此处输入图像描述

你会在页面的第一个焦点上看到，抖动。这是页面上有一个单一的拖放并且我触发对违规元素的关注时的时间线：

在此处输入图像描述

随着更多的滴，它只是更多的相同，但它似乎最多大约 40 油漆。探查器并没有提出任何邪恶的建议。只是一次浏览 jQuery 内部结构。

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

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

非常感谢！

更新： Dave Desandro建议是 3d 加速开始了，所以我用 atranslate代替了它，果然，这并没有引起抖动。我不知道为什么硬件加速会随着一个focus事件而启动，而且只有一次。

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

4

7 回答 7

1

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

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

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

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

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

希望这可以帮助 ：）

于 2013-03-19T02:02:43.090 回答
0

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

$(document).ready(function() {
  $(document).focus(function(e) {
    e.preventDefault();
  });
  $(document).click(function() {
      $(document).unbind();
  });
});
于 2013-08-01T07:38:30.070 回答
0

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

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

于 2012-04-07T23:34:06.907 回答
0

只是我的2c值。

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

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

并寻找任何渲染问题。这些通常是由 z 索引引起的。使用任何 z-indexes 并隐藏/显示某些元素，直到渲染问题得到解决。然后从那里工作。translate-z hack 和不透明度也可能导致问题。

根据经验，我发现可以使用 chrome 诊断其他 webkit 浏览器中的渲染问题。闪烁是常见的安卓浏览器。

其次：查看焦点事件本身并尝试诸如防止默认行为之类的事情。对我来说似乎是一个长镜头，但试一试。

于 2013-06-14T14:18:43.123 回答
0

我知道这个问题是不久前发布的，这有点远，但这里是：

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

在地址栏中输入：about:flags

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

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

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

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

不管怎样，很高兴知道你是如何解决这个问题的（如果你这样做了）。也许发布您自己问题的答案？

于 2012-12-31T09:36:56.297 回答
0

一种避免花费时间修复加载时间抽搐的方法；您可以将页面设置为隐藏，然后使元素在加载时可见。如果您的页面加载缓慢，您可能希望将微调器默认设置为可见，然后将其隐藏。然后，当您无事可做时，您可以回到这个问题。

于 2013-05-15T13:57:53.273 回答
0

我最近遇到了同样的问题，并在我的情况下找到了解决问题的方法。

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

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

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

于 2013-08-26T20:21:57.077 回答