css transition not working in mobile chrome

Question

I'm trying to scale an image with css transition upon clicking some text.

The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css {transition: transform 200ms}.

It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!

Codepen link: https://codepen.io/anon/pen/oqBJzr

CSS:

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

JavaScript:

function checkMarkAnim() {

    $('.checkmark').toggleClass('scale');

}

Any pointers on what has gone wrong would really help.

Thank you in advance

Update:

The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).

Yep, that should work. Due to Apple's restrictions, Chrome uses older webkit (same as Safari) on iOS, and it supports only vendor-prefixed transform. stackoverflow.com/questions/30128587/… — helb
– helb, Commented Mar 20, 2018 at 12:52
Thank you @adpro! Yes, that does seem to work! I had tried: -webkit-transition: transform 200ms; I didn't realise it needed -webkit-transform — HMS
– HMS, Commented Mar 20, 2018 at 13:02
I just ran into this too, looks like this was earlier this year, did you ever figure out a solution? — Misterparker
– Misterparker, Commented Nov 10, 2018 at 3:39

Aliaksandr Sushkevich · Accepted Answer · 2020-03-17 18:27:02Z

85

After a few days of searching what actually worked for me is just Chrome restart.

answered Mar 17, 2020 at 18:27

Aliaksandr Sushkevich

12.5k8 gold badges41 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Daniel Macak Over a year ago

Funny, it worked as well for me. My css transform transition wasn't doing any animation no matter what, but only in Chrome for iOS. Out of despair I even tried to use the old -webkit rule and values, but it didn't help. But then I forced it to a fresh start and it worked again.

0xChqrles Over a year ago

I didn't believe it would work, but... It worked

Artanis Over a year ago

I spent like 15 minutes trying to debug my CSS, and it turns out that it was Chrome issue on iOS. Force killing and re-launching the Chrome did the trick. Thanks!

Jan Klimo Over a year ago

For anyone skeptical, don't dismiss this answer — it works.

Skitterm Over a year ago

I can't believe this worked... Ironically, it worked fine on mobile Safari but not Chrome (until restarting Chrome).

|

Jeroen · Accepted Answer · 2022-12-20 10:11:51Z

4

This is caused by a known issue in iOS.

For more information, see: https://bugs.webkit.org/show_bug.cgi?id=228333 and https://bugs.chromium.org/p/chromium/issues/detail?id=1231712

answered Dec 20, 2022 at 10:11

Jeroen

812 bronze badges

Comments

Michael Meister · Accepted Answer · 2019-03-24 09:59:45Z

1

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark {
    width: 35px;
    -webkit-transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms
    transition: all 200ms;
}

.checkmark.scale {
    -webkit-transform: scale(3);
    transform: scale(3);
}

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

answered Mar 24, 2019 at 9:59

Michael Meister

7471 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

css transition not working in mobile chrome

Update:

3 Answers 3

17 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update:

3 Answers 3

17 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related