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

问题:

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.

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

回答2:

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

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

回答4:

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

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

回答5:

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

回答6:

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.

回答7:

put together this little test to see if it ever gets fixed. currently it crashes mac safari 6.0.5 and iOS safari.

http://jsbin.com/omexek/3/