Mobile Safari Crashes with CSS Transition and Calc()

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.

Archived Comments