IE10/11 使用 transition:-webkit-transform?

Posted 2023-03-06

【中文标题】IE10/11 使用 transition:-webkit-transform?

【英文标题】：IE10/11 uses transition:-webkit-transform?

【发布时间】：2014-04-22 19:50:40

【问题描述】：

在 IE10 或 11 中查看 this JSBin。

如果您检查#test 元素，您会看到它显示转换属性为-webkit-transform（并且转换不会发生）。如果您注释掉transition: -webkit-transform; 声明，如here 所示，则转换有效。

为什么 IE 没有将供应商前缀值作为无效属性值删除？顺便说一句，如果我在 Chrome 上做类似的事情——比如说，-ms-transition 在-webkit-transition 之后——它应该放弃它，并且只使用-webkit-transition 声明。似乎只有在 IE 上才有这个问题。

【参考方案1】：

我刚刚对此进行了更多研究，它看起来更像是一个 Chrome 错误，而不是 IE。

以下是spec 关于transition-property 中无法识别和不可动画的属性的说法：

如果列出的标识符之一不是可识别的属性名称或不是动画属性，则实现仍必须在列表中的动画属性上使用持续时间、延迟和计时函数在它们各自的索引处开始转换“transition-duration”、“transition-delay”和“transition-timing-function”的列表。换句话说，无法识别或不可动画的属性必须保留在列表中以保持索引的匹配。

规范似乎没有考虑到 none 指定的属性受支持或可动画化的情况，甚至在转换 propdefs 之后的部分中也没有考虑。看起来 IE 将声明视为有效，尽管没有要转换的受支持属性，从而覆盖先前的声明，并有效地使声明等同于 transition-property: none（即结果相似，但正如您观察到的值实际上并不计算到none)。

Firefox 的行为方式似乎与 IE 相同，将声明视为等同于 transition-property: none。

此外，如果您将不带前缀和带前缀的 transform 属性名称放在同一个声明中，IE 和 Firefox 会很好地为转换设置动画（顺序无关紧要）：

transition: -webkit-transform 1s, transform 1s;

但是，如果您将任何其他您希望与导致 Chrome 丢弃声明的无法识别的属性一起使用的属性放置......它仍然丢弃该声明。是的，如果 IE 和 Firefox 在上述声明中正确应用了转换，Chrome 会完全忽略它。

不过，似乎只有未知属性名称才有这个问题。例如，如果您指定一个受支持但不可动画化的属性，例如background-image：

transition: -webkit-transform 1s, background-image 1s;

Chrome 能够很好地为变换设置动画。

话虽如此，我仍然不能完全确定规范是否模棱两可，或者 IE 和 Firefox 中显示的行为实际上是否正确。听起来它可以使用任何一种方式进行一些澄清，所以我已经继续并emailed CSSWG 关于这个。

【讨论】：

令人着迷。这是有道理的，尽管有趣的是，Chrome 至少（尚未检查其他浏览器）似乎对它的解释不同。我猜这就是模棱两可的规格的乐趣。

@Turner Hayes：我实际上会继续向 www-style 发送电子邮件，因为我认为 CSSWG 最适合澄清这一点。

@BoltClock 你有没有收到他们的回复？

@TylerH：是的，但规范文本根本没有更新。