CSS 过渡在移动版浏览器中不起作用

Question

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

复选标记图像应在每次单击链接时以动画形式显示。 然而，在iPhone Chrome中，复选标记不会动画 - 只是从一个状态跳到另一个状态，似乎忽略了css {transition： transform 200ms}。

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

代码笔链接：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重启。

Answer 2

这是由 iOS 中的已知问题引起的。

有关详细信息，请参阅：https://bugs.webkit.org/show_bug.cgi?id=228333和 https://bugs.chromium.org/p/chromium/issues/detail?id=1231712

Answer 3

也请添加/保留-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);
}

在这里看到它与移动版 (iOS( 一起工作： https://codepen.io/miikaeru/pen/aMXYEb