CODEWITHSUNDEEP
ioscsssafaricss-transitions
Atadj
Atadj

Reputation: 7180

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

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.

Upvotes: 28

Views: 13181

Answers (7)

Choylton B. Higginbottom
Choylton B. Higginbottom

Reputation: 2304

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

Upvotes: 2

Guido Bouman
Guido Bouman

Reputation: 3275

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

Upvotes: 4

skilleo
skilleo

Reputation: 2481

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/

Upvotes: 0

Benjamin Watanabe
Benjamin Watanabe

Reputation: 11

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.

Upvotes: 0

Jim Hall
Jim Hall

Reputation: 7229

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

Upvotes: 0

Greg
Greg

Reputation: 31378

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

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

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

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

Upvotes: 2

Related Questions