我的网站在Chrome浏览器上一直崩溃

14

由于某些原因,我的网站无法在Google Chrome中运行。它在Firefox中没有特殊错误地完美运行,但在Chrome中不行。为什么会这样呢?

http://www.lemaineofficial.com/

Chrome Error
(它说发生了错误,并且我可以尝试重新加载。但是它总是给出相同的错误)

当我的javascript要被执行时(它会短暂地加载网站),Chrome就会中止页面。我从未见过像这样的错误,也不知道如何进行故障排除,除非删除函数直到可以工作,我将尝试这样做。

我只需要知道什么可能导致Chrome和javascript出现这种行为,或者知道如何轻松地进行故障排除。

注意:此网站在Firefox中按预期工作,没有崩溃。

编辑#1:

进一步检查后,此错误并不一定是由于javascript引起的。我可以认为我不是唯一遇到这个错误的人,但有没有使用Chrome能够查看该网站的人?感谢您的理论。如果我在这方面变得更聪明,我会更新的。

编辑#2:

这里似乎有些东西导致了问题,但是每个定义的值都是必需的。

body.visitor_mode div#content {
    /* Outruled cause */
    -webkit-column-gap: 5vw;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    -webkit-column-width: 45vw;
    -moz-column-width: 45vw;
    column-width: 45vw;
}

这里是否有任何内容会导致Chrome崩溃?

编辑#3:

我已经解决了自己的问题。它是由使用column-gapcolumn-width以及单位vw引起的,Chrome似乎不喜欢。我用JavaScript重做了Simons回答中提到的行为。

目前唯一缺少的东西是我的column-width的“正确.width()”。Firefox给我实际宽度,而Chrome只给我column-width值。感谢Simon的编辑,我设法得到了一个不错的解决方案。但是,我使用了css transition,使offset()。left不可靠。有没有其他方法可以获得该值?


一种可能的调试方法是删除部分代码,直到页面正常工作...然后可以回顾最后删除的部分。 - Arun P Johny
这是我打算采取的最后一招,但由于我多年来从未遇到过这种行为,我想知道是什么原因导致它在Firefox中工作而在Chrome中不工作。 - Robin Castlin
最近Chrome在许多网站上都出现了这种情况,但我还没有找到规律。 - CodeCaster
我们需要获取控制台日志。当您看到错误时,请按F12,转到“控制台”选项卡,复制您在那里看到的所有内容并在此处分享。 - Kuzgun
我现在已经在Safari/Mac上尝试过了,它也崩溃了! - Mostafa Berg
显示剩余9条评论
8个回答

5
问题似乎是在iframe的/css/page/story中的一部分。 当你将-webkit-column-gap中的单位从vw更改为px(或完全删除它)时,它会完全搞乱iframe的布局,但它不会再崩溃浏览器标签页。 我认为这是Chrome渲染引擎中的一个bug,它会破坏column-gap css属性中的新vw单位。 如果您想要一个简单的两列布局,我建议使用两个div。
<div style="width: 50%; float: left;"></div>

编辑

一种可能的方法是使用像素值通过javascript更改css值。

function onResize() {
    var width = 0.45 * $(window).width();
    var gap = 0.05 * $(window).width();
    $("#content")
        .css("-webkit-column-width", width + "px")
        .css("-webkit-column-gap", gap + "px");
}

$(function() {
    if (/webkit/.test(navigator.userAgent.toLowerCase())) {
        $(window).resize(onResize);
        onResize();
    }
});

第二次编辑

要获取包含列的 div 的宽度,您可以插入以下代码:

<span id="endmarker"></span>

然后使用$("#endmarker").position().left + columnWidth获取左侧位置,该位置是所有列的总宽度。当内容恰好匹配两列(文本上下没有像素空间)时,有一个特殊情况,跨度似乎会因为某种原因移动到第一列。

第三次编辑

我找到了第二次编辑中问题的解决方案,如果在标记跨度内添加一个空格 (<span id="endmarker">&nbsp;</span>),问题似乎就解决了。


这会破坏设计,因为它应该向右扩展。如果你在Firefox中打开主页并缩小它,你就会明白我的意思。我会尝试进一步搜索并看看是否能找到更理想的解决方案。 - Robin Castlin
我可以在JavaScript中运行这个程序,而且既然我已经使用了resize事件,那么我也可以这样做。我会在这个问题上再和你联系的。 - Robin Castlin
我现在已经添加了它,只剩下最后一个问题了。在Chrome中,.width()仅限于 _一列_,而不是所有列。我该如何像Firefox一样获得总宽度? - Robin Castlin
你是什么意思?$(window).width() 返回窗口的总宽度(在您的情况下为iframe)。 - Simon Fischer
除此之外,当您浏览时,.offset()值会发生变化... Chrome一定有一种可靠的方法来获取实际宽度,对吧? - Robin Castlin
显示剩余2条评论

2
在通过iframe加载的Story.html文件中,您在body中有一些样式定义,请将其移至head部分 :)(这不是问题,只是看起来很糟糕)
同样在同一样式定义中,您有
body.visitor_mode div#content
将其更改为
body.visitor_mode div.content
(顺便说一下,您在代码中使用了它 :P)
这解决了我在Chrome上(版本30.0.1599.66 @ 64位Linux来自Google Repo :P)遇到的问题-页面已成功加载

2

看起来可能与你的hashchange事件有关。在StackOverflow上有一篇帖子,有人使用它时遇到了麻烦,值得一读:$(window).hashchange() doesn't work

我建议将其注释掉

$(function() {
    $(window).trigger('hashchange');
});

尝试加载页面并检查其是否正确加载,然后从那里开始解决问题。

关于浏览器兼容性问题,我发现这个网站很有用:http://caniuse.com/#search=hash


11
你让我自己去看我的回答,真是有点讽刺哈哈 :D - Robin Castlin
哎呀!我没注意到 :) - Mentatmatt

1

好的,这是我到目前为止的发现

在Mac上进行所有测试

Chrome:显示类似于您的错误 FireFox:可以工作,但非常卡顿(i7处理器,8GB内存和SSD),这不应该发生 Safari:崩溃。

当我检查Safari的崩溃日志时,我得到了导致它崩溃的部分的堆栈跟踪:

0   com.apple.WebCore               0x00007fff8bf08384 WebCore::RenderBlock::calcColumnWidth() + 260
1   com.apple.WebCore               0x00007fff8c89c9e7 WebCore::RenderBlock::recomputeLogicalWidth() + 119
2   com.apple.WebCore               0x00007fff8bf072eb WebCore::RenderBlock::layoutBlock(bool, int) + 139
3   com.apple.WebCore               0x00007fff8bf06f84 WebCore::RenderBlock::layout() + 52
4   com.apple.WebCore               0x00007fff8bf166d9 WebCore::RenderBlock::layoutPositionedObjects(bool) + 441
5   com.apple.WebCore               0x00007fff8bf07a98 WebCore::RenderBlock::layoutBlock(bool, int) + 2104
6   com.apple.WebCore               0x00007fff8bf06f84 WebCore::RenderBlock::layout() + 52
7   com.apple.WebCore               0x00007fff8bf06ed7 WebCore::RenderView::layout() + 759
8   com.apple.WebCore               0x00007fff8bf063b6 WebCore::FrameView::layout(bool) + 1702
9   com.apple.WebCore               0x00007fff8bf05c65 WebCore::Document::updateLayoutIgnorePendingStylesheets() + 133
10  com.apple.WebCore               0x00007fff8c0c2d72 WebCore::Element::offsetHeight() + 18
11  com.apple.WebCore               0x00007fff8c0c2d4d WebCore::jsElementOffsetHeight(JSC::ExecState*, JSC::JSValue, JSC::Identifier const&) + 13

这是一个与WebKit相关的崩溃,涉及到视图渲染,建议您检查代码并逐步删除部分以使其正常工作。我的第一个建议是删除大量文本,其中包含以下内容:“Brödtext som borde vara här!Brödtext som borde vara här!”并查看是否有所帮助,此外,必须减小背景图像的大小,它们太大了,如果由于内存问题而无法在大多数浏览器中使用,它们将占用大量带宽。

@Johannes 那是一段时间之前的事情了,我几乎不记得我做了什么,但我要么查看了检查器(Cmd + Option + I)菜单并选择了调试器选项卡并设置了未捕获异常断点,要么转储了 ~/Library/Logs/CrashReporter 的内容,这是在 Mac 上完成的。 - Mostafa Berg
感谢您的回复,@Mostafa。我很好奇,因为我从未见过这些类型的日志,并且一直在尝试调试渲染引擎问题,使用常规开发人员工具进行调试相当困难。 - Hanna
@Johannes 很高兴能帮忙,如果这个不起作用的话,请让我知道,我可以尽力回忆一下我确切做了什么! - Mostafa Berg

0

我知道这很奇怪,但有时候cookie会导致这个问题,这在我身上曾经起过作用。删除所有的cookie,然后再试一次。


这个错误不仅发生在我的电脑上,所以很可能不是一个 cookie 问题。 - Robin Castlin

0

你的图片非常大(2048x1152),而且你有4张。

首先尝试使用较小的图片,看看Chrome是否能够处理。

此外,你应该量化你的图片。 检测分辨率并发送较小的图片,如果不必显示大图。 (我的FireFox也崩溃了(24.0))


1
这些图片在 Chrome 开始拒绝该网站之前都能够完美地工作。 - Robin Castlin

0
首先,我建议您在服务器上注释掉这五个JavaScript引用。这样做不会太麻烦。看看是否会出现错误的文件夹图标。
如果没有出现错误的文件夹图标,请添加一个引用,然后再次在Chrome中打开页面。反复执行此过程,直到找到错误的位置。
然后,请告诉我们您的发现。

0

我不知道这是否有帮助,但我能够在Chrome开发者工具窗口中看到一个错误。 enter image description here

为了查看此内容: 1. 打开一个新标签页 2. 按F12打开开发者工具 3. 导航到网站 4. 单击黑色弹出窗口上的X,该弹出窗口显示目标已崩溃 5. 单击“控制台”选项卡。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接