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.

It's obviously a bug, try reporting it, see [How should I submit bug reports and feature requests?](http://apple.stackexchange.com/questions/11789/how-should-i-submit-bug-reports-and-feature-requests) on Ask Different. — Rob W, Dec 27 '12 at 13:32
Safari 6 supports calc already but it crashes when you use this with transition. — Atadj, Jan 24 '13 at 12:58
Man, my whole afternoon was spent discovering this little bug. Thanks for this. — Jim Hall, May 10 '13 at 22:11
Confirming what @Atadj said, Safari 6.0.5 (Desktop) crashes when -webkit-calc is used in conjunction with a CSS3 transition. — Nuri Hodges, Jul 26 '13 at 20:40

score 4 · Answer 1 · answered May 21 '14 at 10:31

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

answered May 21 '14 at 10:31

Guido Bouman

3,155
4
22
33

FYI, this currently doesn't work on iOS. Looks like a Mobile Safari bug. – typeoneerror Mar 14 '18 at 01:24

score 2 · Answer 2 · answered Feb 08 '13 at 23:18

2

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

answered Feb 08 '13 at 23:18

Mooseman

18,763
14
70
93

score 2 · Answer 3 · answered Apr 28 '15 at 23:44

2

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

answered Apr 28 '15 at 23:44

Choylton B. Higginbottom

2,236
3
24
34

score 0 · Answer 4 · answered Mar 05 '13 at 13:43

0

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

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

answered Mar 05 '13 at 13:43

Greg

31,180
18
65
85

score 0 · Answer 5 · answered May 10 '13 at 22:11

0

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

answered May 10 '13 at 22:11

Jim Hall

6,079
2
16
15

i believe that's exactly what causes the crash. – Kenneth Sep 25 '13 at 02:50

score 0 · Answer 6 · answered May 28 '13 at 02:42

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.

score 0 · Answer 7 · answered Jul 27 '13 at 23:05

0

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/

answered Jul 27 '13 at 23:05

skilleo

2,451
1
27
34

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

7 Answers7

Linked