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 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.

Answer 1

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);
}