WebKit 浏览器中的渲染错误答案

【问题标题】：Rendering bug in WebKit browsersWebKit 浏览器中的渲染错误
【发布时间】：2012-08-31 04:53:27
【问题描述】：

在我目前从事的项目中，我们遇到了非常奇怪的渲染问题。最糟糕的是，这个问题完全是自发出现的，经过几天的测试，我们还没有找到可以重现这个问题的操作顺序。这里解释一下这个 bug 的样子。这是页面外观的屏幕截图：

但是在某些操作后会弹出内容块而不是这样，因此只有部分内容是可见的，并且看起来像：

最奇怪的是，这样的块位置不是基于 Web Inspector 显示的 CSS 属性的值。

如您所见，CSS 属性正常，而块的位置却不行。这个事实表明我可能是 WebKit 引擎的一些渲染错误

该项目是使用 Ext JS 3.4 构建的，它是一个经典的单页 Web 应用程序。此问题出现在 Mac OS 10.7/10.8 上的 Chrome 和 Safari 的最新版本中。尽管由于此问题的自发性，它也可能出现在其他浏览器和平台中。

欢迎提供有关如何调试此类问题或如何出现此类问题的任何建议。

【问题讨论】：

如果是bug，请提交至crbug.com
你检查过Javascript没有产生错误吗？
@AndrewMorton 当然，不存在 JS 错误。
你能分享任何我们可以重现问题的代码吗？
你如何定位你的内容标签。你能告诉我们这个元素的css属性和对它的操作吗？

标签： javascript extjs rendering

【解决方案1】：

请检查您的任何代码或 Ext JS 的代码是否正在使用 scrollIntoView 方法，当在任何未将溢出设置为 auto 的元素上调用 scrollIntoView 并且它位于可能放置的剪辑元素内时，我们看到了类似的问题相对定位。

这似乎是 webkit 中的错误，因为它滚动了其他浏览器中没有发生的剪辑元素。

我还看到同一层次结构中的两个元素已将溢出设置为自动。并且 scrollIntoView 正在滚动错误的元素。

【讨论】：

【解决方案2】：

Mac 上的 Chrome 和 Safari 存在滚动问题。如果元素已经滚动并且内容发生了变化，即使内容不够高而需要滚动，滚动位置也会保持不变。

我们在应用程序中发现的解决方法是调整容器（具有滚动条的容器）的大小，使其具有滚动条（否则您无法使用滚动属性），然后重置滚动条，然后高度。

$(container).css('height',1).scrollTop('1').css('height','');

这是我们在 jQuery 中的做法。你甚至不会看到闪烁:)

我不确定这是否是问题所在，但这件事情让我们暂时站稳了脚跟。

【讨论】：

【解决方案3】：

我在使用 sencha touch 2 应用程序时遇到了同样的问题，因为这与 ExtJS 相同，我有一个解决方案给你
这可能是框架中的一个错误，当 ExtJS 在浏览器填充正确的window.innerWidth 和window.innerHeight 之前渲染应用程序时会发生这种情况，因此视口不能采用正确的宽度和高度。这也解释了事件的随机性。这在手机上使用时会变得更加突出，这可能是因为资源有限且响应速度慢。
我为处理此问题而采取的解决方案不是一个好的解决方案，但考虑到框架本身存在故障，我找不到更好的解决方案
我每说 100 毫秒后轮询浏览器的正确 height 和 width 大约一秒钟，以获得正确的窗口高度和宽度，如果我发现 viewport 的高度或宽度不一样，我会重新调整它。因为您正在使用 ExtJS 并且应用程序将在高性能系统上运行（与手机相比）我会建议更小的间隔，然后为了安全起见，它会轮询更长的时间段。
这是我当前使用的代码，根据您的需要编辑

var aId = setInterval(function () {
                    if (Ext.Viewport.getWidth() !== window.innerWidth || Ext.Viewport.getHeight() !== window.innerHeight) {
                        Ext.Viewport.setSize(window.innerWidth, window.innerHeight);
                        clearInterval(aId);
                    }
                    num = num + 1;
                    if (num > 10) {
                        clearInterval(aId);
                    }
                }, 100)

我目前在应用程序的launch function 中使用此代码。但是您也可以在viewport 的show 事件中使用它，您应该将间隔时间保持在尽可能短的时间以避免任何滞后。
如果您认为此应用程序可能会在用户更改窗口高度和宽度的设备上使用（例如移动浏览器在 orientation 更改时 或如果您认为用户会更改 @ 987654332@ 和 width 的浏览器窗口）。然后只需将相同的代码片段复制并粘贴到视口resize event 中，这样当视口的大小发生变化时它也会轮询并调整视口的大小。

【讨论】：

【解决方案4】：

您是否尝试添加 clear:both;工具栏 div 后面的块？

<div style="clear:both;"></div>

【讨论】：

【解决方案5】：

@bjornd 如果没有任何代码，很难调试 :)

工具栏是否已定位并且内容是否具有在 URL 中调用的 ID？换句话说：是否有一些链接（例如）触发#content 并且没有preventDefault() 等？这可能会滚动页面。

我不知道，这是我想到的第一件事。

也可能是toolbar 内容（由于某种原因）不再被清除，或者content 的top 位置发生了一些变化（相对于另一个更改/删除的元素？）

尝试创建一个包含最简单代码但仍会触发错误的精简测试用例。如果您发布（通过例如 Fiddle 等），我们可以进行适当的查看。

【讨论】：

“尝试创建一个精简的测试用例，其中包含最简单的代码但仍会触发错误”我不能这样做，因为问题不稳定且无法重现一步一步来。

【解决方案6】：

可能是css问题；

通过设置padding-bottom: 99999px; 和margin-bottom: -99999px;，我在使用等高 div 时遇到了类似的问题。在所有情况下都可以正常工作，除非您使用主题标签锚点跳转到页面上的 div 进一步。 <a href="#someDivFurtherOnThePage">Jump down</a>.

在这种情况下，页面顶部被剪裁并以我想查看的 div 开头。

既然你说这个问题很难追踪，这可能是值得一看的。解决方案是删除这 2 条 css 行并使用另一种设置 div 高度的方法。

【讨论】：