css 转换在移动设备中不起作用 chrome

Question

我正在尝试在单击某些文本时使用 css 过渡来缩放图像。

每次单击 link 时，复选标记图像都应以动画形式出现和出现。然而，在 iPhone Chrome 中，复选标记没有动画 - 只是从一种状态跳到另一种状态，似乎忽略了 css {transition: transform 200ms}.

它似乎在除 iPhone Chrome 浏览器之外的任何地方都有效 - 我已经尽我所能地完成了所有工作，但它完全难倒了我！

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

}

任何关于错误的指示都会很有帮助。

提前致谢

更新：

添加 -webkit-transition: -webkit-transform 200ms; 的建议似乎没有解决问题（虽然我最初认为它已经解决了）。

Answer 1

也请add/keep-webkit-transition: transform 200ms;。所以最后你应该有：

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

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

在此处使用移动设备查看 chrome (iOS)：https://codepen.io/miikaeru/pen/aMXYEb

Answer 2

经过几天的搜索，真正对我有用的是只需Chrome重新启动。

css 转换在移动设备中不起作用 chrome

css transition not working in mobile chrome

css-transitions

css-transforms

更新：