Mobile Webkit回流问题 [英] Mobile Webkit reflow issue

问题描述

我在移动版本的webkit中遇到了问题（特别是iOS 5.1.1上的Webkit 534.46，作为移动Safari，现在是iOS版Chrome），这在我看过的任何桌面浏览器上都不会发生。 （即下面的演示应该在移动版本的webkit上查看。）

I've been experiencing an issue in mobile versions of webkit (specifically Webkit 534.46 on iOS 5.1.1 as mobile Safari, and now Chrome for iOS) which doesn't happen on any desktop browser that I've seen. (i.e. the demos below should be viewed on a mobile version of webkit.)

这是一个问题的实例。 CSS的核心是非常简单的。它在页面左侧放置一个字母索引：

Here is a live example of the issue. The core of the CSS is extremely straight forward. It positions an alphabet index along the left of the page:

#index {
    left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}

当元素固定在body顶部时，它完全能够进行交互，直到滚动改变，然后它停止接受输入。如果我（手动）摇动滚动甚至一个像素，那么它再次变得活动。示例保持尽可能简单，不使用任何JavaScript。在真正打击它之后，我发现，看起来元素认为它是滚动的，但已经在视觉上固定。换句话说，如果你点击'A'，然后尝试再次点击'A'，有时你会得到第二次点击，但它会在列表的下面。这看起来像一个CSS回流问题给我。我知道移动webkit试图减少回流的次数。

The issue happens when an element is fixed position over the top of the body. It is fully able to be interacted with until the scroll changes and then it stops accepting input. If I (manually) jiggle the scroll even one pixel then it becomes active again. The example was kept as simple as possible and does not use any JavaScript. After really hammering on it, I've discovered that it appears that the element thinks it is scrolled but has been visually fixed. In other words, if you click on 'A' then try to click on 'A' again, sometimes you will get a second click in but it will be further down the list. This seemed like a CSS reflow issue to me. I know that mobile webkit attempts to reduce the number of reflows.

Here is a live example of the workaround.

我可以使用JS来强制整个文档的CSS回滚在滚动（与节流阀阻止发生，直到滚动后100毫秒）似乎解决这个问题在简单的例子。不幸的是，这不会帮助这个问题的真实版本。

I am able to use JS to force the CSS of the entire document to reflow on scroll (with a throttle which prevents it from happening until 100ms after scrolling) which seems to workaround this issue in the simple example. Unfortunately, this does not help the real world version of this issue.

这是问题页面的代码和解决方法脚本。

我的问题是这里发生了什么，我失踪了？具体来说，我很好奇，如果任何CSS大师能弄清楚布局的情况是什么，防止点击击中固定元素的正确位置？

My question is what is happening here and is there a CSS workaround that I am missing? Specifically, I'm curious if any CSS guru can figure out what the layout situation is that prevents the clicks from hitting the correct place on the fixed element? A better understanding might help find a real fix.

编辑：我忘记提及该示例明确强制视口大小为窗口。因此，用户无法放大/缩小，意味着位置：fixed应将元素锚定到窗口的左侧。

I forgot to mention that the example explicitly forces the viewport to the size of the window. So the user cannot zoom in/out, meaning that the position:fixed should anchor the element to the left side of the window.

更新（2012-09 -20）：这似乎在iOS 6（以及UIWebView）的Mobile Safari中已修复。任何解决方法应首先检查，以确保它是在iOS& 6.例如，使用 CssUserAgent ，其格式如下：

Update (2012-09-20): This appears to be fixed in Mobile Safari on iOS 6 (as well as UIWebView). Any workaround should first check to make sure it is on iOS < 6. For example, using CssUserAgent this would look like:

if (parseFloat(cssua.ua.ios) < 6) { /* ... */ }

推荐答案

实际解决我的问题的答案是一个解决方案的变体在@Paul Sweatte的链接之一：

The answer that actually solved my particular issue was a variation of a solution found in one of @Paul Sweatte's links:

基本上，添加一个比身体高的平原div。当它被移除时，它使得主体有效地滚动或回流。将添加/删除之间的延迟设置为0ms足以允许重新计算DOM而不会导致任何闪烁。这是我可以找到的最小的脚本，完全解决了问题所有位置：固定元素在这个问题的特定实例

Essentially, a plain div which is taller than the body is added. When it is removed, it causes the body to effectively scroll or reflow. Setting the delay to 0ms between adding/removing is enough to allow the DOM to recalculate without causing any flickering. This was the minimal script I could find which fully solved the problem for all position:fixed elements on my particular instance of this issue.

var hack = document.createElement("div");
hack.style.height = "101%";
document.body.appendChild(hack);
setTimeout(function(){
    document.body.removeChild(hack);
    hack = null;
}, 0);

这篇关于Mobile Webkit回流问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！