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

Question

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

http://www.lemaineofficial.com/

(它表示发生了错误,我可以尝试重新加载.但是它总是会出现同样的错误)

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

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

注意:此网站与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单位引起的vw,Chrome似乎并不喜欢.我在javascript中重新设置了这种行为,而不是在Simons的回答中给出的.

目前,我唯一缺少的是" .width()从我的错误column-width.火狐给了我实际的宽度,而Chrome只是给了我column-width价值.感谢Simons编辑,我设法得到了一个很好的解决方案.但是,我用过css transition,这使得offset().left不可靠.有没有其他方法来获得这个价值？

Answer 1

这个问题似乎是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,即所有列的总宽度.当内容完全匹配(文本上方或下方没有像素空间)为两列时,有一种特殊情况,无论出于何种原因,跨度似乎都会移动到第一列.

第3编辑

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