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.
![enter image description here]()
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:
![enter image description here]()
A redraw area of 320 by 75 pixels, that I would guess is the top header.
![enter image description here]()
So I removed the <div class="navbar navbar-fixed-top top-nav"> using the web inspector, and no more singular matrix errors.
![enter image description here]()
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.
![enter image description here]()
I tried every element inside, and I found that removing just the <button> fixed the issue.
![enter image description here]()
![enter image description here]()
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.
