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

Perhaps do something like this:

.class{
    left: -webkit-calc(100% - 100px);
    transition: margin-left 1s linear, right 1s linear;
}


.class.open {
    margin-left: -100%;
    right: 100px;
}

WARNING: Untested

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

Unfortunately I had to do this to accomplish a similar task:

$('.modal').css({
  'height': $(window).height() - 40
});

Answer 4

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 5

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.

Answer 6

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