4

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

所需外观

但是在一些操作内容块弹出后而不是这个，所以只有部分内容是可见的，它看起来像：

问题

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

网络检查员

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

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

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

4

6 回答 6

1

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

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

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

于 2012-08-28T07:41:24.730 回答
1

我在使用sencha touch 2应用程序时遇到了同样的问题，因为这与ExtJS我为您提供的解决方案相同，
这可能是框架中的一个错误，当 ExtJS 在浏览器填充之前渲染应用程序时发生这种情况可能是正确的window.innerWidth，window.innerHeight因此视口不能采用正确的宽度和高度。这也解释了事件的随机性。这在手机上使用时会变得更加突出，这可能是因为资源有限且响应缓慢。
我为处理这个可能而采取的解决方案不是一个好的解决方案，但考虑到我找不到更好的解决方案是框架本身的故障，
我轮询正确height和width每说 100 毫秒后浏览器的大约一秒钟，以获得正确的窗口高度和宽度，如果我发现高度或宽度不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。但是您也可以在show事件中viewport使用它，您应该将间隔时间保持在尽可能短的时间以避免任何滞后。
如果您认为此应用程序可能会在用户更改窗口高度和宽度的设备上使用（例如当方向更改时移动浏览器，或者如果您认为用户会更改浏览器窗口的height和width）。然后只需在视口中复制并粘贴相同的代码片段，resize event以便在视口大小发生变化时也轮询和调整视口大小。

于 2012-08-30T20:46:54.543 回答
1

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

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

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

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

我不确定这是否是问题所在，但这件事让我们站了一段时间。

于 2012-08-28T14:27:25.830 回答
0

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

<div style="clear:both;"></div>
于 2012-08-22T08:10:08.983 回答
0

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

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

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

也可能toolbar是（由于某种原因）不再清除的内容或content'stop位置的某些更改（相对于另一个更改/删除的元素？）

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

于 2012-08-24T08:59:04.120 回答
0

这可能是一个 CSS 问题；

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

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

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

于 2012-08-30T20:53:27.667 回答