My site keeps crashing on my Chrome

Question

For some reason my site won't operate in Google Chrome. It works flawlessly in Firefox without special errors, but is a no-no in Chrome. What gives?

http://www.lemaineofficial.com/

(It says an error has occured, and that I can try to reload. However it gives same error always)

The moment my javascript wants to get executed (it loads the site briefly), Chrome just aborts the page. I've never seen an error like this and have no idea how to troubleshoot except removing functions till it works, which I will try to do.

I just need to know what can cause this behavior on Chrome with javascript, or know how to easily troubleshoot it.

Note: This site works as intended with Firefox without crashes.

EDIT #1:

This error doesn't necessarily mean it's due to javascript after further checking. I can asume I'm not alone in having this error, but is there someone with Chrome who can view the site? Thanks for your theories. I'll update if I get any wiser on this.

EDIT #2:

Something here seems to cause the problem, but every value defined is required

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;
}

Is there anything in here that causes Chrome crashes ?

Edit #3:

I've solved this issue for me now. It was caused by using column-gap and column-width and the unit vw, which Chrome didn't seem to like. I remade this behavior in javascript instead as given in Simons answer.

At the moment the only thing I'm missing is the "correct .width() from my column-width. Firefox gives me the actual width, while Chrome simply gives me the column-width value. Thanks to Simons edit, I managed to get half a good solution. However, I used css transition, which makes offset().left unreliable. Is there any other way to get that value?

Answer 1

The problem seems to be part of the css in the iframe /page/story. When you change the units in -webkit-column-gap from vw to px (or remove it completely) it completely messes up the layout of the iframe but it doesn't crash the browser tab anymore.

I think this is a bug in the Chrome rendering engine which does break with the new vw unit in the column-gap css property.

If you want a simple two column layout i suggest use two divs with

<div style="width: 50%; float: left;"></div>

EDIT

One possible way is to change the css value with javascript using pixel values.

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();
    }
});

2nd Edit

To get the width of the div containing the columns, you can insert

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

and then get the left position with $("#endmarker").position().left + columnWidth, which is the total width of all columns. There is one special case when the content matches exactly (with no pixel space above or below the text) into two columns, the span seems to be moved to the first column for whatever reason.

3rd Edit

I found out a solution for the problem in the 2nd edit, if you add a space into the marker span (<span id="endmarker">&nbsp;</span>) the problem seems to be gone.