iOS Safari + CSS calc() + CSS transition = Instant Crash

Question

When I try to use left: -webkit-calc(100% - 100px); (assuming that left: 0; is initial state) it works in iOS 6.0.1 just fine. But when I do the sa

Answer 1

I ran into this same problem after spending much time testing my responsive, not iOS mobile, design in Chrome. There were many "elastic" elements in place so I wanted a solution that could cover all of them at least for an early version.

If you're doing a responsive design using purely CSS a hack to keep it from at least crashing is:

@media (max-device-width: 1024px) {

* {
  -webkit-transition: width 0, top .8s !important;
  -moz-transition: width 0, top .8s !important;
  -o-transition: width 0, top .8s !important;
  transition: width 0, top .8s !important;
}

I wanted to keep the top positioning transitions in place, so had to do it this way.

This solution could be better as it will have some overlap with people using 1024 monitors & Android, but I did use max-device-with in place of max-width to avoid overlap with small windows. I'd assume that 1024 monitor users likely aren't using a modern browser, but would like to fix the Android overlap.