Mobile Safari Crashes with CSS Transition and Calc()
Friday, March 08, 2013 01:10 PM
While working on browser compatibility for a web app my company develops, I discovered that one area consistently crashed mobile Safari on our iPad. At first I figured it must be a JavaScript issue as we’d added some significant code for a new feature. But where even to start with that? The crash log for the iOS simulator in xCode revealed that the crash was happening around animations. So I went to see what CSS animations we had in our code and discovered a handful of transitions. All of these had been in the previous working version though. Through a lot of commenting out of pieces I discovered that the addition of height: -webkit-calc(100% + 15px) was the culprit. Certain combinations of transitions and calc() will cause iOS browsers to crash. I put together a Codepen to explain these situations.
[...read more...]
- Mobile Safari Crashes with CSS Transition and Calc()
- Speaking Out
- The Future
- Transitioning to In-House
- Random PHP Password Generator
- Making Repeatable Background Stripes
- Frustrated? No.
- Dumb Hackers
- Typekit Goes to Adobe
- Help with OAuth (in PHP)
Archives
Saved for Posterity
Currently
Curious What I'm Doing These Days?
AJ Swoboda
http://ajswoboda.com
A.J. Swoboda is a smart guy. He finished up his PhD last year and this year published his first book. I crafted a responsive, fluid, website for him.
Latest tweet: . @EvanOsherow As we were saying... http://t.co/RZNe6zWG4M via @waxpancake
