我收到了一个错误报告，该网站在 iOS 6.1 上查看时崩溃，但我猜是 iOS 6.1 附带的浏览器版本比操作系统本身更相关。我没有任何 iOS 设备，所以我不确定如何重现/调查该问题。
有没有人建议我如何在 Windows/Ubunutu 上重现这个问题？我试过http://www.browserstack.com/但他们提供的最新版本是 iOS 6.0。
万一有人知道为什么会发生崩溃，请告诉我。主页上有一个嵌入的 YouTube 视频，听说 flash 和 iOS 是不安的伙伴，所以我想知道这是否是原因？
我能够重现该问题，并从控制台日志中获取此信息：
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.
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:
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.
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.)
I was unable to make iOS or Safari crash on your site, but you'll need to do so to debug the issue.
Switch back to Terminal and review the logs for info about what might have caused the crash.
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.
我认为这不会发生在安装在 Windows 或其他平台上的 safari 中。我认为这是与 iOS 相关的特定问题。
笔记：
我在你的网站上遇到了崩溃。当我使用您的网站并单击前进、后退箭头 5 到 6 次时。当我点击图片后，它会进入一个类似的页面festivals.ie/festival/map并崩溃。
编辑：
在我的 mac 上安装的 safari 上进行了相同的测试。在上述情况下没有发现崩溃。所以我认为这是一个 iOS 特定的崩溃。（我认为与记忆或类似的东西有关）。
您需要注册为 Apple Developer 才能使用模拟器并使用 Web 检查器进行调试。
您可以尝试以下链接以获取更多信息。
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