网站崩溃/未在iPhone 5s的iOS 9上加载

Question

I'm tearing my hair out at this one.

On my iPhone 5s running iOS 7.1.1 everything regarding my web page is fine:

WEBSITE LINK REMOVED FOR SECURITY PURPOSES.

However, on iPhone 5s running iOS 9 I get the following error, that completely destroys / does not load the page, making it completely unusable:

"A problem occurred with this web page so it was reloaded"

I have searched high and low for ideas about this one but there appears to be no real direct cause.

One thing I noticed in my trial and error testing, is that if I remove the main app.min.css stylesheet, it will at the least load the page (DOM).

However, if I then load the CSS but this time with an empty file...the error appears. So it appears that it's not related to my CSS per se - just to the act of linking to it.

I've gone through and tried removing all scripts, images etc...with no luck. Removing the CSS is about as close as I have gotten to solving the issue, but even with a blank CSS file, the problem occurs. It makes no sense to me.

So to summarise what I know:

1. This appears to be triggered by the inclusion of my app.min.css stylesheet.
2. Even if the CSS is included as a totally blank file, the error still happens.
3. Removing all JS does not solve the issue.
4. It happens on any page, not just the landing page or any particular area. Works fine on my older version of iOS but not the newer 9+ on iPhone 5s

I'm hoping you can help. I would love to provide isolated code examples, but since this issue is so 'out there', I wouldn't know what to write up as a test case.

If there's anything obvious you can notice in dev tools I'd love to know. Thanks!

Here's a screenshot of the iOS simulator having the problem too:

Answer 1

After much debugging, I found the offending CSS that completely causes webkit browsers on iOS9 + to crash and burn (Safari and Chrome):

::-webkit-scrollbar-thumb:window-inactive {
    // Properties
}

Removing this line now removes the error and loads the page correctly.

This problem was hard to debug because the iPhone heavily caches your CSS files. To get around this, cache bust your CSS when testing by appending a random query string to the end like so (PHP):

<link rel="stylesheet" href="/path/to/css/file.css?refresh=<?php echo md5(rand()); ?>">

Remember to remove this once your debugging is done so that you can take advantage of caching.

Twitter post here for sharing: https://twitter.com/michaelpumo/status/669478677600669696

Hope this helps somebody out there. What a pain it was!

Answer 2

Seems like your website opens only on Google Chrome. Safari crashed. Opening on Mozilla Firefox shed some light.

I see this error on the console downloadable font: download not allowed (font-family: "Tiempos Regular" style:normal weight:normal stretch:normal src index:1): content blocked source: http://example.com/wp-content/themes/future-cities/dist/fonts/TiemposTextWeb-Regular.woff

which is in app.min.css .

@font-face {
    font-family: "Tiempos Regular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/TiemposTextWeb-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/TiemposTextWeb-Regular.woff") format("woff")
}

Take that font out of css and then try it. It should work.

Hope it helps!