CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Robin Castlin
Robin Castlin

Reputation: 10996

My site keeps crashing on my Chrome

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/

Chrome Error
(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?

Upvotes: 14

Views: 7655

Answers (8)

Simon Fischer
Simon Fischer

Reputation: 1208

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.

Upvotes: 5

user1618236
user1618236

Reputation:

I Don't know if this helps but I was able to see an error in the chrome developer tools window. enter image description here

In order to see this: 1. Open a new tab 2. Press F12 to open dev tools 3. Navigate to the website 4. Click the X on the black popup that says the target has crashed 5. Click the Console tab.

Upvotes: 0

Mostafa Berg
Mostafa Berg

Reputation: 3239

Ok So here's my findings so far

All testing on a Mac

Chrome: Shows error like yours FireFox: Works, but very laggy (i7 processor, 8gig ram and SSD), this shouldn't happen Safari: Crashes.

When I checked safari's crashlog, I got the stack trace of the part that causes it:

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

So this is a WebKit related crash, that's related to rendering the views, I'd suggest you check out your code and start removing parts till it works.

my first suggestion is to remove the huge amount of text that says:

Brödtext som borde vara här! Brödtext som borde vara här!

and see if that helps, also you must reduce the background images' sizes, they're huge and if they won't kill most browsers due to memory issues, they'll eat up lots of your bandwidth.

Upvotes: 1

paranoid
paranoid

Reputation: 535

In the Story.html file which is loaded by iframe, you have some style definitions in body, move it to head section :) (that's not the problem, it just looks bad)

Also in that same style definition you have

body.visitor_mode div#content

Change it to

body.visitor_mode div.content

(which you are using in code btw :P)

And that solved the issue on my Chrome (Version 30.0.1599.66 @ 64bit Linux from Google Repo :P) - page has loaded succesfully

Upvotes: 2

IAmALinux
IAmALinux

Reputation: 76

First, I'd try commenting out your five javascript references on the server. That's not too much work. See if you get the sick folder icon.

If no sick folder appears, add one back in. Pull it up in Chrome again. Continue this process until you find the break point.

Then, report back your findings.

Upvotes: 0

pszaba
pszaba

Reputation: 1064

Your images are VERY big (2048x1152) and you have 4pcs.

First try with smaller images and lets see if the Chrome can handle.

Also you should quantate your images. Detect the resolution and send smaller images if don't have to display large ones. ( my FireFox also crashed(24.0) )

Upvotes: 0

Kuzgun
Kuzgun

Reputation: 4737

I know it is weird but sometimes cookies can cause this problem, it worked for me once. Delete all your cookies and try again.

Upvotes: 0

Mentatmatt
Mentatmatt

Reputation: 525

It looks like it might be to do with your hashchange event. There's a post on StackOverflow where somebody else had trouble using it, might be worth a read: $(window).hashchange() doesn't work

I suggest commenting out 

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

and see if the page loads correctly, then work from there.

With regards to browser compatibility, I find this site useful: http://caniuse.com/#search=hash

Upvotes: 2

Related Questions