在WebKit浏览器中渲染错误

在我目前工作的项目中，我们遇到了非常奇怪的渲染问题。最糟糕的是，这个问题完全自发地出现，经过几天的测试，我们还没有找到能够再现这个问题的一系列行动。这里是对这个错误的解释。这里是页面应该如何看起来像一个截图：一些操作内容块弹出的内容，因此只有部分后在WebKit浏览器中渲染错误

Desired look

但是这实际上是可见的，它的样子：

Issue

最奇怪的是，该块这样的位置不是基于CSS属性的值，如通过Web检查。

Web inspector

正如你所看到的CSS属性都OK，而块的位置是没有的。这个事实给我建议，这可能是WebKit引擎的一些渲染错误

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

如何调试这些问题或如何可能出现是欢迎任何一条建议。

来源

2012-08-22 bjornd

如果这是一个错误，然后在http://crbug.com – starbeamrainbowlabs

文件，它是否检查有没有被Javascript产生的错误？ –

@AndrewMorton当然，不存在JS错误。 – bjornd

您是否尝试添加明确的：both;在工具栏div之后阻止？

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

来源

2012-08-22 08:10:08 Madhur

@bjornd这是相当困难的，而不调试任何代码:)

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

我不知道，这是浮现在脑海的第一件事。

它也可能是toolbar的内容是（出于某种原因）不再被清除或content的top位置有些变化（相对于另一个改变/删除的元素？）

打算创建一个精简包含最简单的代码但仍触发错误的下拉测试用例。如果您发布（通过例如小提琴等），我们可以有一个适当的外观。

来源

2012-08-24 08:59:04 davidhund

“尝试，并创建一个包含简单的代码精简测试用例，但仍然引发了错误：”我不能这样做，因为这个问题是不是稳定的，不能被复制的步骤一步。 – bjornd

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

似乎错误WebKit中，因为它滚动未在其他浏览器中发生的剪裁元素。

我也看到在已溢出设置为auto同一层级的两个元素。 scrollIntoView正在滚动错误的元素。

来源

2012-08-28 07:41:24

Mac上的Chrome和Safari浏览器遇到滚动问题。如果元素已经滚动并且内容改变，即使内容不够高而不需要滚动，滚动位置也会保持。

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

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

这里是我们如何在jQuery中做到这一点。你甚至不会看到闪烁:)

我不确定这是否是问题，但这件事让我们暂时搁置了一段时间。

来源

2012-08-28 14:27:25 Salketer

我经历了同样的问题去与一个sencha touch 2应用程序，因为工作，而这就是同ExtJS我有一个为你解决
这可能是在框架中的错误而发生这种情况时，ExtJS的呈现在浏览器应用程序之前填充mayb正确的window.innerWidth和window.innerHeight，因此视口不能采取正确的宽度和高度。这也解释了事件的随机性。这在使用移动设备时可能会因为资源有限和响应速度慢而变得更加突出。
我采取处理这个MAYB解心不是一个很好的人，但我不能找到一个更好的考虑是在框架毛刺本身
我轮询正确height和浏览器的width周边的一秒钟后，每说对于窗口的正确高度和宽度为100ms，如果我发现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事件中使用这个事件，您应该尽量缩短间隔时间以避免任何滞后。
与此如果您认为这个应用程序可能会在用户更改窗口高度和宽度的设备上使用（如移动浏览器在方向更改或如果您认为用户将更改height和width浏览器窗口）。然后复制&将相同的代码片粘贴到视口resize event中，以便在视口大小更改时轮询并调整视口。

来源

2012-08-30 20:46:54

这可能是一个CSS问题;

我有类似的问题，使用相同的高度divs设置padding-bottom: 99999px;和margin-bottom: -99999px;。在所有情况下哪些工作正常，除非您使用哈希标签锚点在页面上进一步跳转到div。 <a href="#someDivFurtherOnThePage">Jump down</a>。

在这种情况下，页面的顶部剪辑，并开始与我想看到的股利。

既然你说这个问题很难跟踪，这可能是需要看看的东西。解决方案是删除这2个CSS行，并使用另一种设置div高度的方法。

来源

2012-08-30 20:53:27 Neograph734

在WebKit浏览器中渲染错误

回答

相关问题