IE10 / 11使用transition：-webkit-transform？ [英] IE10/11 uses transition:-webkit-transform?

问题描述

请参阅IE10或11中的此JSBin 。

如果你检查 #test 元素，你会看到它显示转换属性 -webkit-transform 并且不发生转变）。如果您注释掉转换：-webkit-transform; 声明，如此处所示

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

解决方案

我只是做了一些更多的研究，





这里是 spec 说明 transition-property 中无法识别和不可动画的属性：

如果列出的标识符之一不是可识别的属性名称或不是animatable属性，实现必须仍然在列表中的可动画属性上启动转换， ，transition-delay，transition-delay和transition-timing-function的列表中的相应索引的延迟，延迟和定时函数。换句话说，必须在列表中保留无法识别或不可动画的属性，以保留索引的匹配。

似乎考虑到 none 指定的属性是支持或动画的情况，即使在转换propdefs后面的部分。看起来IE正在将声明视为有效，虽然没有支持的属性被转换，从而覆盖先前的声明，并有效地使声明等效于 transition-property：none （即结果是类似的，但是你已经观察到该值实际上不会计算到 none ）。

Firefox看起来与IE的行为相同，将声明视为等同于 transition-property：none 。

此外，如果你在同一个声明中添加前缀和前缀的属性名，IE和Firefox将动画变换只是罚款（顺序无关紧要）： / p>



  transition：-webkit-transform 1s，transform 1s; 
  

但是，如果放置任何其他属性，您期望与无法识别的属性Chrome要删除声明...仍然删除该声明。是，IE和Firefox在上述声明中正确应用转换， Chrome完全忽略它。

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

  transition：-webkit-transform 1s，background-image 1s; 
  

Chrome能够对转换进行动画处理。

$ b $所有这一切，我仍然不完全确定规范是否含糊，或者IE和Firefox中显示的行为实际上是正确的。听起来像它可以使用一点澄清，无论哪种方式，所以我已经走了电子邮件 CSSWG关于此。

See this JSBin in IE10 or 11.

If you inspect the #test element, you'll see that it shows the transition property as -webkit-transform (and the transition does not happen). If you comment out the transition: -webkit-transform; declaration, as shown here, then the transition works.

Why is IE not dropping the vendor-prefixed value as an invalid property value? Incidentally, if I do something similar on Chrome--put, say, -ms-transition after -webkit-transition--it drops it as it should, and uses only the -webkit-transition declaration. It seems to only be on IE that this is a problem.

解决方案

I just did some more research on this, and it's looking more like a Chrome bug than something about IE.

Here's what the spec says about unrecognized and non-animatable properties in transition-property:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.

The spec does not seem to account for cases when none of the properties specified are supported or animatable, not even in the sections following the transition propdefs. It looks like IE is treating the declaration as valid, albeit with no supported properties to be transitioned, thereby overriding the previous declaration, and effectively making the declaration equivalent to transition-property: none (i.e. the result is similar, but as you have observed the value does not actually compute to none).

Firefox appears to behave the same way that IE does, treating the declaration as equivalent to transition-property: none.

Furthermore, if you put the unprefixed and prefixed transform property names in the same declaration, IE and Firefox will animate the transform just fine (order doesn't matter):

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

However, if you place any other properties that you would expect to work together with the unrecognized property that causes Chrome to drop the declaration... it still drops that declaration. Yes, where IE and Firefox apply the transition correctly in the above declaration, Chrome ignores it entirely.

It seems to only have this problem with unknown property names, though. For example, if you specify a property that is supported but not animatable, such as background-image:

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

Chrome is able to animate the transform just fine.

With all that said, I'm still not entirely sure if the spec is ambiguous, or the behavior shown in IE and Firefox is in fact correct. Sounds like it could use a bit of clarification either way, so I've gone ahead and emailed the CSSWG about this.

这篇关于IE10 / 11使用transition：-webkit-transform？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！