我的网站一直在我的C​​hrome上崩溃

时间：2013-10-02 09:42:25

标签： javascript jquery google-chrome

出于某种原因，我的网站无法在Google Chrome中运行。它在Firefox中完美运行，没有特殊错误，但在Chrome中是禁忌。是什么给了什么？

<德尔> http://www.lemaineofficial.com/

Chrome Error
（它表示发生了错误，我可以尝试重新加载。但是它总是会产生同样的错误）

我的javascript想要执行的那一刻（它会短暂加载网站），Chrome就会中止该页面。我从来没有见过像这样的错误，也不知道如何排除故障，除非删除功能直到它起作用，我将尝试这样做。

我只需要知道使用javascript在Chrome上导致此行为的原因，或者知道如何轻松排除故障。

注意：此网站可以正常使用Firefox而不会崩溃。

编辑＃1：

此错误并不一定意味着它是由于进一步检查后的javascript。我可以认为我并不是唯一一个出现此错误的人，但有人可以查看该网站吗？谢谢你的理论。如果我对此更加明智，我会更新。

编辑＃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-gap和column-width以及Chrome似乎不喜欢的单位vw。我在javascript中重新设置了这种行为，而不是在Simons回答中给出的。

目前我唯一缺少的是“.width()中的column-width正确。”Firefox为我提供了实际宽度，而Chrome只给了我column-width值。感谢Simons编辑，我设法得到了一个很好的解决方案。但是，我使用了css transition，这使得offset().left不可靠。还有其他方法可以获得该值吗？

8 个答案:

答案 0 :(得分：5)

问题似乎是iframe /page/story中css的一部分。 当您将-webkit-column-gap中的单位从vw更改为px（或完全删除它）时，它会完全混乱iframe的布局，但不会再使浏览器标签崩溃。< / p>

我认为这是Chrome渲染引擎中的一个错误，它会破坏vw css属性中的新column-gap单元。

如果你想要一个简单的两列布局我建议使用两个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获取左侧位置，这是所有列的总宽度。当内容完全匹配（文本上方或下方没有像素空间）为两列时，有一种特殊情况，无论出于何种原因，跨度似乎都会移动到第一列。

第3次修改

我在第二次编辑中发现了问题的解决方案，如果在标记范围（<span id="endmarker">&nbsp;</span>）中添加空格，问题似乎就消失了。

答案 1 :(得分：2)

看起来它可能与您的hashchange事件有关。在StackOverflow上有一篇文章，其他人在使用它时遇到了麻烦，可能值得一读：$(window).hashchange() doesn't work

我建议发表评论

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

并查看页面是否正确加载，然后从那里开始工作。

关于浏览器兼容性，我发现此网站很有用：http://caniuse.com/#search=hash

答案 2 :(得分：2)

在由iframe加载的Story.html文件中，你在body中有一些样式定义，将它移到head section :)（这不是问题，它看起来很糟糕）

同样在相同的样式定义中

body.visitor_mode div #content

将其更改为

body.visitor_mode div.content

（你在代码btw：P中使用）

这解决了我的Chrome上的问题（版本30.0.1599.66 @ 64bit Linux from Google Repo：P） - 页面已成功加载

答案 3 :(得分：1)

好的，所以这是我迄今为止的调查结果

在Mac上进行所有测试

Chrome：显示与您相同的错误 FireFox：工作，但非常滞后（i7处理器，8gig RAM和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ödtextomombordevarahär！ Brödtextombordevarahär！

看看是否有帮助，你也必须减少背景图片的大小，它们是巨大的，如果它们不会因为内存问题而杀死大多数浏览器，它们会占用大量的带宽。

答案 4 :(得分：0)

我知道它很奇怪，但有时候饼干会导致这个问题，它对我有用。删除所有Cookie，然后重试。

答案 5 :(得分：0)

你的图像非常大（2048x1152），你有4个。

首先尝试使用较小的图片，然后查看Chrome是否可以处理。

您还应该定量图像。 检测分辨率并发送较小的图像（如果不必显示较大的图像）。 （我的FireFox也崩溃了（24.0））

答案 6 :(得分：0)

首先，我尝试在服务器上评论你的五个javascript引用。这不是太多的工作。看看你是否得到了生病的文件夹图标。

如果没有显示生病文件夹，请重新添加一个。再次将其拉入Chrome中。继续此过程，直到找到断点。

然后，报告你的发现。

答案 7 :(得分：0)

我不知道这是否有帮助，但我能够在chrome开发人员工具窗口中看到错误。 enter image description here

为了看到这个： 1.打开一个新选项卡 2.按F12打开开发工具 3.导航到网站 4.单击黑色弹出窗口中的X，表示目标已崩溃 5.单击“控制台”选项卡。

相关问题
最新问题