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

Answer 2

This has been a WebKit bug for some time now. For now you can use JS to accomplish the same end effect.

Answer 3

None of the answers posted thus far worked for me.

What did work was working around the calc statement using negative margin:

#example {
  left: 100%;
  margin-left: -100px;
}