How can I reproduce website crash on iOS 6.1

问题:

I received a bug report that this website crashes when viewed on iOS 6.1, though I guess it's the browser version that comes with iOS 6.1 that's more relevant than the OS itself. I don't own any iOS devices, so I'm not sure how I can reproduce/investigate the issue.

Does anyone have a suggestion for how I might reproduce this issue on Windows/Ubunutu? I tried http://www.browserstack.com/ but the latest version they offer is iOS 6.0.

In the unlikely event that anyone has an idea why the crash is happening, please let me know. There is an embedded YouTube video on the homepage, and I've heard that flash and iOS are uneasy bedfellows, so I'm wondering if this could be the cause?

回答1:

Update

I was able to reproduce the issue, and get this info from the console logs:

Feb 14 12:45:54 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:45:56 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:45:56 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:45:57 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:45:59 Aaron-Bragers-iPhone ReportCrash[46048] : Not saving Jetsam log because no data from the kernel. Feb 14 12:45:59 Aaron-Bragers-iPhone UserEventAgent[13] : jetsam: kernel termination snapshot being created Feb 14 12:45:59 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:46:04 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:46:04 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:46:05 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix. Feb 14 12:46:06 Aaron-Bragers-iPhone MobileSafari[45279] : CGAffineTransformInvert: singular matrix.

... followed by lots of memory warnings.

Your website is causing a memory leak, so iOS is shutting Safari down. Looks like you'll have to follow these instructions to debug it.

---

Windows

There isn't much you can do to try to reproduce it in Windows. The only option is to download Safari 5 for Windows, which might produce similar errors.

However, this doesn't use the same build of WebKit as Mobile Safari (Safari for Windows is much older) so you'll probably need to borrow a friend's Mac and follow along:

Mac

1. Test your website in the iOS Simulator

Get Xcode

If you don't already have it, download Xcode from the Mac App Store.

Make a blank project

File -> New Project. Select Single View application (or any other iOS application, it doesn't matter). Press Next. Pick any project name (doesn't matter). Press next, then specify some location, and press Create.

Run the project

Press the play button in the upper left corner, or press Command-R, or select Run from the Product menu.

The app should launch in the simulator.

Switch to Safari

Press the home button (or command-shift-H). Then tap Safari, and navigate to your website.

2. Log output.

Open up Terminal, and run tail -f /var/log/system.log | egrep 'MobileSafari'. This will show you all of Mobile Safari's logs. (You can remove the egrep to see all logs, in case the crash is outside of Safari.)

2. Reproduce the issue

I was unable to make iOS or Safari crash on your site, but you'll need to do so to debug the issue.

3. Check the simulator's console logs for details

Switch back to Terminal and review the logs for info about what might have caused the crash.

回答2:

I was able to reproduce the issue on my iPhone 3GS iOS 6.1 it crashes instantly without any action on the page. There's no error on the Web Inspector. When using iOS Simulator, it does Not crash but it show MobileSafari[11079]: CGAffineTransformInvert: singular matrix. on device log.

If I scroll the page without interacting with none of the elements, the error singular matrix repeat on console, even if I scroll 1 by pixel.

Profiling many times, on iOS Simulator I don't see any javascript memory leak. So I would guess that this is rendering related.

So I removed the stylesheet http://festivals.ie/static/mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css to check, and the matrix errors stopped. So that's confirm my concern.

Next we need to be able to separate, what is causing this.

I profiled the page, and scrolled the page, wait for the singular matrix error, and stopped the profiling. This is what I got:

A redraw area of 320 by 75 pixels, that I would guess is the top header.

So I removed the <div class="navbar navbar-fixed-top top-nav"> using the web inspector, and no more singular matrix errors.

I tried enabling and disabling every style that matches to the div, the only one that made any difference was position: fixed, but it may be something conflicting inside the fixed div.

I tried every element inside, and I found that removing just the <button> fixed the issue.

Now I think that you can track what is the problem of that button.

this is the css related to the button:

media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:175
label, input, button, select, textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:21
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
    -webkit-appearance: button;
}

festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:19
button, input {
    line-height: normal;
}

festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:18
button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle;
}

festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:859
* {
    margin: 0;
}

festivals.ie
media="screen, projection"
mNga2i69LFf9ezK2IBanFA9rPb7jjsGzC6PNOP5MjO1.css:798
::selection {
    background: #4e87e1;
    color: #ffffff;
}

Base Style Rules
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
    -webkit-box-align: center;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 0px 1em;
    border: 1px solid rgb(76, 76, 76);
    border-image: initial;
    background-color: rgba(255, 255, 255, 0.0078125);
    font: 11px Helvetica;
    box-sizing: border-box;
}

input, textarea, keygen, select, button, isindex {
    margin: 0em;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: -webkit-auto;
}

button {
    -webkit-appearance: button;
}

I hope that this was useful because it took me a long time until here.

回答3:

1. You need to check this on iOS device.
2. iOS don't support flash

I think it won't happen in the safari installed on Windows or other platforms. I think it is a specific issue related to iOS.

Note:

I got the crash in your site. When I used your site and clicked the forward, backward arrows 5 to 6 times. And after when I clicked the image it goes to a page festivals.ie/festival/map something like that and crashed.

EDIT:

Tested the same on the safari installed on my mac. No crash found in the above case. So I think it is a iOS specific crash. (I think related to memory or something like that).

回答4:

You will need to either register as an Apple Developer to use the simulator and use the web inspector to debug.

You can try the following link for more information.

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/

回答5:

The problem was caused by the commented-out CSS properties below

html {
  background: url(../images/responsive/bg.svg) no-repeat center center fixed;

/* 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
*/

  outline: 0!important;
}

After removing these properties, the problem no longer occurs