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).

Answer 1

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

Answer 2

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