css - IE10/11 uses transition:-webkit-transform?

Question

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.

Answer 1

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.