14

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

http://www.lemaineofficial.com/

铬错误
（它说发生了错误，我可以尝试重新加载。但是它总是给出同样的错误）

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

我只需要知道什么会导致使用 javascript 在 Chrome 上出现这种行为，或者知道如何轻松解决它。

注意：本网站在 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-gapandcolumn-width和 unit引起的vw，Chrome 似乎不喜欢它。我在 javascript 中重新制作了这种行为，而不是在 Simons 的回答中给出。

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

4

8 回答 8

5

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

我认为这是 Chrome 渲染引擎中的一个错误，它确实与css 属性vw中的新单元中断。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，即所有列的总宽度。有一种特殊情况，当内容完全匹配（文本上方或下方没有像素空间）到两列时，无论出于何种原因，跨度似乎都移动到了第一列。

第三次编辑

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

于 2013-10-07T23:38:32.250 回答
2

在 iframe 加载的 Story.html 文件中，您在 body 中有一些样式定义，将其移至 head 部分:)（这不是问题，只是看起来很糟糕）

同样在您拥有的相同样式定义中

body.visitor_mode div#content

将其更改为

body.visitor_mode div.content

（顺便说一句，您在代码中使用它：P）

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

于 2013-10-06T17:22:04.333 回答
2

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

我建议注释掉

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

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

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

于 2013-10-02T09:59:10.320 回答
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ödtext som borde vara här！Brödtext som borde vara här！

看看这是否有帮助，你还必须减小背景图像的大小，它们很大，如果由于内存问题它们不会杀死大多数浏览器，它们会占用你的大量带宽。

于 2013-10-06T17:22:26.557 回答
0

我不知道这是否有帮助，但我能够在 chrome 开发人员工具窗口中看到一个错误。 在此处输入图像描述

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

于 2013-10-07T23:07:26.870 回答
0

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

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

然后，报告你的发现。

于 2013-10-06T17:05:22.287 回答
0

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

于 2013-10-02T10:13:33.397 回答
0

您的图像非常大（2048x1152），您有 4 张。

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

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

于 2013-10-02T10:13:37.073 回答