8

My website http://remotejobs.io crashes Safari consistently. I first noticed the crash last night when I was at a Verizon store and I tried browser testing the site on an iPad. So I tried 2 more iPads at the same store, and the site crashed iOS Safari on all 3 devies, every single time I tried to hit the domain.

The exact workflow is:

  1. Open Safari
  2. Enter http://remotejobs.io

That's it. As soon as you hit go the site crashes.

This also happens on desktop Safari (tested in 6.0.3 on OSX 10.8.3 only), and produces an error report every time. Here's a copy of one of the error reports generated: http://go.jag.is/OGcS

The site is not throwing any JS errors, and works fine on other modern browsers that I have tested, including Chrome, Firefox, and even IE9 (shockingly enough).

One strange thing though, is that it only seems to crash iOS Safari on iPads, not iPhones, as I can successfully load the site on my iPhone every time.

What on earth could be causing this, and how do I debug it?

UPDATE: I tried commenting out the main stylesheet, and the site no longer crashes Safari without that stylesheet. I tried both a regular stylesheet, and a minified stylesheet, and both crash the browser.

UPDATE 2: I narrowed it down to the CSS by commenting out JS and leaving CSS in, and still it crashed. Then I tried removing all the transition properties, and it no longer crashes. So apparently the transition properties were causing the crash.

Joel Glovier
  • 7,469
  • 9
  • 51
  • 86
  • IE8 is the last MS browser that is slightly problematic. IE would just ignore transitions. Some "modern" browser would implement transitions and crash trying. I've seen some ugly things in Chrome, and Safari seems to be getting only worse, while IE keeps getting better (have you tried IE11?) - so IE really doesn't deserve to be pointed at like it used to be in the past. Safari, on the other hand... – Rolf Mar 17 '14 at 16:15

4 Answers4

10

So I was able to narrow the problem down to the CSS with Adam Moore's suggestion, and then to the transition property declarations with Jonathan Sampson's comment.

I removed all the lines with transition and the site no longer crashed.

So then I looked at the values, and tried unifying the duration values, to see if that would help, since I was setting several different duration values across the different properties, including .5s on one, .3s on another, and .25s on yet a couple more. But unifying them didn't affect anything - still crashed.

Finally, I tried changing the transition-property from all to color, since color was the only thing I was really changing, and no more crashes! So apparently that was the solution. Seems Safari was choking on trying to transition all the properties.

Joel Glovier
  • 7,469
  • 9
  • 51
  • 86
  • 7
    Please file this as a bug with Apple. Safari really shouldn’t crash because of some CSS! – Nate Apr 19 '13 at 18:09
  • I'll try this, finally I find a hint why my page crashes in every safari browser – olanod Jul 11 '13 at 21:41
  • I reproduced the crash with CSS transitions on iPad with iOS 7 Safari. I checked the logs (Settings -> General -> About -> Diagnostics & Usage) and it was a low memory problem. – Ming-Tang Feb 23 '14 at 22:29
  • 1
    Surprisingly, this is still happening for me in 2017. My whole site is completely destroyed in Safari and Chrome on iOS. (I think they share the same browser engine). It's completely unusable, mostly blank but sometimes flickering random bits of the screen. It looks like I dropped my phone in a pool. I'll try looking for "transition-property: all" and see if I can fix it by removing those. – ndbroadbent May 18 '17 at 11:30
  • I can confirm that `transition: all` still causes problems in Safari 11.0.2 (reference https://github.com/angular/material/issues/11043). It doesn't crash, but it can break flexbox layouts (*crazy*)! – Splaktar Jan 10 '18 at 08:27
5

Your website does not seem to crash Safari 5.1 on Windows 7. To go about debugging what's causing the issue, start by turning off the CSS, then one by one disable JS files until the website stops crashing. Once you've figured out which CSS file or JS file it is, then post a link to the file and I'll see if I can help!

Adam Moore
  • 665
  • 6
  • 12
  • 1
    Wow - actually I disabled just the stylesheet and the site now loads successfully. CSS shouldn't be able to crash the whole browser?!? – Joel Glovier Apr 13 '13 at 14:06
  • 1
    @JoelGlovier It can, and has, in my experience. Especially things like transitions; they can cause some nasty memory issues. – Sampson Apr 13 '13 at 15:15
  • 1
    I narrowed it down to the CSS by commenting out JS and leaving CSS in, and still it crashed. Then I tried removing all the transition properties, and it no longer crashes. So apparently the transition properties were causing the crash. – Joel Glovier Apr 13 '13 at 15:35
  • Great to hear you found the culprit! CSS3 is still a work in progress so some browsers will have issues with certain rules. – Adam Moore Apr 13 '13 at 16:32
2

I stumbled across the same issue in Safari and tried everything mentioned here. I also checked the css in the CSS validator and fixed some issues.

But my trigger for the crash were padding with percentage values. I converted the %-Values from the paddings and all the things were fine.

Patrick
  • 162
  • 2
  • 11
1

-webkit-transform-style: preserve-3d !important;

Caused Safari to continuously reload because of error. Removed that and it worked. :).

Safari - Version 8.0.8 (10600.8.9) OSX EL Captain

CMAN
  • 31
  • 2