在WebKit浏览器中渲染错误

Question

在我目前工作的项目中，我们遇到了非常奇怪的渲染问题。最糟糕的是，这个问题完全是自发产生的，经过几天的测试后，我们还没有找到重现这个问题的行动序列。这是对这个bug的看法的解释。以下是页面外观的截图：

但是在经过一些操作后，内容块会弹出，所以只有部分内容可见，它看起来像：

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

正如您所看到的，CSS属性没问题，而块的位置则没有。这个事实告诉我，它可能是WebKit引擎的一些渲染错误

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

欢迎任何有关如何调试此类问题或如何解决此问题的建议。

Answer 1

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

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

我还看到同一层次结构中有两个溢出设置为auto的元素。而scrollIntoView是滚动错误的元素。

Answer 2

Mac上的Chrome和Safari会遇到滚动问题。如果元素已滚动且内容发生变化，即使内容不够高而无法滚动，也会保留滚动位置。

我们在应用程序中找到的工作是调整容器（具有滚动的容器）的大小，使其具有滚动条（否则您无法使用滚动属性）然后重置滚动，并且高度。

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

以下是我们在jQuery中的使用方法。你甚至不会看到闪烁的声音：）

我不确定这是不是问题，但这件事让我们站了一会儿。

Answer 3

我在使用sencha touch 2应用时遇到了同样的问题，因为那与ExtJS相同，我有一个解决方案 这可能是框架中的一个错误，当ExtJS在浏览器填充mayb正确的window.innerWidth和window.innerHeight之前渲染应用程序时会发生这种情况，因此视口无法获取正确的宽度和高度。这也解释了事件的随机性。当在手机上使用时，这可能因资源有限和反应迟缓而变得更加突出 我用来处理这个问题的解决方案不是一个好的解决方案，但考虑到框架本身的故障，我找不到更好的解决方案。 我在浏览器的正确height和width之后每隔100毫秒查看窗口的正确高度和宽度，如果我发现{{1的高度或宽度不同我调整它。因为你正在使用ExtJS，应用程序可以运行在高功率系统上（与手机相比）我会建议一个较小的间隔，然后安全一个更长的轮询周期。
继承了我目前根据您的需求编辑的代码

viewport

我目前在应用的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的{​​{1}}事件中使用它，你应该将间隔时间保持在最低限度以避免任何滞后。
如果您认为此应用可能会在用户更改窗口高度和宽度的设备上使用（如方向更改时的移动浏览器或者您认为用户会更改{浏览器窗口的{1}}和show）。然后只是复制＆amp;将相同的代码段粘贴到视口viewport中，以便在视口大小更改时轮询和调整视口大小。

Answer 4

你有没有尝试添加一个明确的：两个;在工具栏div之后阻塞？

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

Answer 5

@bjornd在没有任何代码的情况下进行调试非常困难：）

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

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

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

尝试创建一个包含最简单代码但仍会触发错误的精简测试用例。如果您发布（通过例如小提琴等），我们可以正确看看。

Answer 6

这可能是一个CSS问题;

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

在这种情况下，页面的顶部被剪切并以我想要看到的div开始。

由于您说问题很难跟踪，因此可能需要关注一下。解决方案是删除这两条css线并使用另一种设置div高度的方法。