Reproducing A Clever Animation Product, Part 28

In keeping with this week’s theme of researching backward compatibility of the various projects I’ve worked on over the past year I decided to figure out why parts of my fast animation framework weren’t updating as expected. The short answer is that IE 11 (and presumably 10 and 9 as well) simply does not process more than one parameter passed to a scale command in a style.transform assignment. I originally saw this happen in the debugger using the transform property directly. Changing the code to use msTransform (both when hard-coded and when switched after detection) didn’t change the behavior.

Here’s the relevant code running in the IE 11 debugger, as it appears just after having executed the statement at line 957. (transformPrefix has the value of “msTransform” in this case.)

…and here is the value of the variable we have supposedly assigned:

Doing the same thing in most other browsers results in the watch values taking on the expected result with both parameters. Although the Mozilla spec says that browsers should accept an optional second parameter, IE does not do so.

The solution, therefore,is to test to see if we’re running IE (9 or later?) and handle this scaling operation with only a single parameter as a special case. This means we cannot specify different scaling factors in the x- and y-directions but hey, it is what it is and it will do something. If we really, truly need to scale the axes independently then we can create a mechanism that uses the scaleX and scaleY commands separately.

I’ll implement the custom code tomorrow.

I used this code to detect which browser I was using and which prefixes I should use.

transformPrefix is the only value relevant in this code but I’ve included the others to demonstrate that they can be used. The code I lifted from an online example (from 2012) didn’t test for the typeof result coming back as an empty string; I had to add that when I got that result in the various debuggers when testing the value transform. That used to be first in the list of parameters to the GetVendorPrefix call but I moved it to the end to ensure I captured other possible results first.

Once the value of transformPrefix is set it can be used in a couple of different ways:

It turns out that just using transform property in most modern browsers will achieve the desired results. This must be the outcome of many years of standardization by the vendors.

This entry was posted in Tools and methods and tagged , , . Bookmark the permalink.

Leave a Reply