javascript - 我的网站在我的 Chrome 上不断崩溃

Question

出于某种原因，我的网站无法在 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-gap 和 column-width 以及单位 vw 引起的，Chrome 似乎不喜欢。我用 javascript 重新制作了这种行为，而不是按照 Simons 的回答给出的那样。

目前我唯一缺少的是“column-width 中的“正确的.width()”。Firefox 给我实际的宽度，而 Chrome简单地给了我 column-width 值。感谢 Simons edit，我设法得到了一半好的解决方案。但是，我使用了 css transition，这使得 offset ().left 不可靠。是否有任何其他方法可以获取该值？

Answer 1

问题似乎是 iframe 中的 css 的一部分 /page/story .当您更改 -webkit-column-gap 中的单位时来自 vw至 px (或完全删除它)它完全弄乱了 iframe 的布局，但它不再使浏览器选项卡崩溃。

我认为这是 Chrome 渲染引擎中的一个错误，它确实与新的 vw 中断了。单位在column-gap css 属性。

如果你想要一个简单的两列布局，我建议使用两个 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> ) 中添加一个空格，问题似乎就消失了。