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

css, css-transitions, ios, safari

Solution

You can fix this by initialising the property with anything but auto:

.menu {
  left: 0;
  transition: left 1s linear;
}

.menu-open .menu {
  left: -webkit-calc(100% - 50px);
  left: calc(100% - 50px);
}

Problem

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 same with `transition: left 1s linear;` it instantly crashes Safari, every single time. Is it known bug or am I doing something wrong? It also doesn't work in Safari 5 (no reaction). But it works in Firefox and Chrome.

Original source