css 过渡在移动版 chrome 中不起作用

Question

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

每次单击链接时，复选标记图像都应该有动画效果。然而，在 iPhone Chrome 中，复选标记没有动画 - 只是从一种状态跳转到另一种状态，似乎忽略了 css {transition: transform 200ms}。

除了 iPhone Chrome 浏览器之外，它似乎在任何地方都可以使用 - 我已经尽我所能地完成了所有事情，但它完全让我难住了！

Codepen 链接：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

经过几天的搜索，实际上对我有用的只是 Chrome restart。

Answer 2

还请添加/保留-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