dcsimg

What is your dream?

What do you do?

That's right: You

This is about you, your goals, your passions.

Figure that out and we'll help you take it to the world, shouting it from the rooftops. We create the websites that enable you to achieve this dream.

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.

Comments

Kurt said

Awesome information, helped me a bunch.

Thanks

On 01/01 at 03:28 PM

Commenting is not available in this channel entry.

Want to work together or maybe just say hello?

Copyright 2006 - 2024 Philip Renich