{"id":1272,"date":"2016-12-28T20:43:43","date_gmt":"2016-12-29T01:43:43","guid":{"rendered":"http:\/\/rpchurchill.com\/?p=1272"},"modified":"2017-02-03T13:00:46","modified_gmt":"2017-02-03T18:00:46","slug":"reproducing-a-clever-animation-product-part-28","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2016\/12\/28\/reproducing-a-clever-animation-product-part-28\/","title":{"rendered":"Reproducing A Clever Animation Product, Part 28"},"content":{"rendered":"

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<\/code> command in a style.transform<\/code> assignment. I originally saw this happen in the debugger using the transform<\/code> property directly. Changing the code to use msTransform<\/code> (both when hard-coded and when switched after detection) didn’t change the behavior.<\/p>\n

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

<\/p>\n

…and here is the value of the variable we have supposedly assigned:<\/p>\n

<\/p>\n

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<\/a> says that browsers should accept an optional second parameter, IE does not do so.<\/p>\n

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<\/code> and scaleY<\/code> commands separately.<\/p>\n

I’ll implement the custom code tomorrow.<\/p>\n

I used this code to detect which browser I was using and which prefixes I should use.<\/p>\n

\r\n      function GetVendorPrefix(arrayOfPrefixes) {\r\n        var tmp = document.createElement(\"div\");\r\n        var result = \"\";\r\n\r\n        for (var i = 0; i < arrayOfPrefixes.length; ++i) {\r\n          var fred = tmp.style[arrayOfPrefixes[i]];\r\n          if ((typeof tmp.style[arrayOfPrefixes[i]] != 'undefined') && (typeof tmp.style[arrayOfPrefixes[i]] != \"\")) {\r\n           result = arrayOfPrefixes[i];\r\n           break;\r\n          }\r\n          else {\r\n           result = null;\r\n          }\r\n        }\r\n        return result;\r\n      }      \r\n\r\n      var transformPrefix = GetVendorPrefix([\"msTransform\", \"MozTransform\", \"WebkitTransform\", \"OTransform\", \"transform\"]);\r\n      var transitionPrefix = GetVendorPrefix([\"transition\", \"msTransition\", \"MozTransition\", \"WebkitTransition\", \"OTransition\"]);\r\n      var animationPrefix = GetVendorPrefix([\"animation\", \"msAnimation\", \"MozAnimation\", \"WebkitAnimation\", \"OAnimation\"]);\r\n      var gridPrefix = GetVendorPrefix([\"gridRow\", \"msGridRow\", \"MozGridRow\", \"WebkitGridRow\", \"OGridRow\"]);\r\n      var hyphensPrefix = GetVendorPrefix([\"hyphens\", \"msHyphens\", \"MozHyphens\", \"WebkitHyphens\", \"OHyphens\"]);\r\n      var columnPrefix = GetVendorPrefix([\"columnCount\", \"msColumnCount\", \"MozColumnCount\", \"WebkitColumnCount\", \"OColumnCount\"]);\r\n<\/pre>\n
transformPrefix<\/code> 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<\/a> (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<\/code>.  That used to be first in the list of parameters to the GetVendorPrefix<\/code> call but I moved it to the end to ensure I captured other possible results first.<\/p>\n
Once the value of transformPrefix<\/code> is set it can be used in a couple of different ways:<\/p>\n
\r\n      \/\/here I'm just building a string that will be executed as a standalone command\r\n      function bcDefineScaleTween(sElement,pStartX,pStartY,pEndX,pEndY,tBegin,tDuration,mMethod) {\r\n        \/\/var s = sElement+\".style.transform='scale(\"+pStartX+\",\"+pStartY+\")';\";\r\n        var s = sElement+\".style.\"+transformPrefix+\"='scale(\"+pStartX+\",\"+pStartY+\")';\";\r\n        ...\r\n\r\n\r\n      \/\/here I'm assigning the property when I can't write the new code out, transformPrefix = \"msTransform\"\r\n      var handle003 = document.getElementById(\"handle003\");\r\n      bcInitElement(handle003,\"120px\",\"60px\",\"yellow\",\"rgba(0,0,0,0)\",\"80px\",0,\"block\",\"This text grows in scale\");\r\n      \/\/ here's where the action is; it works the same way if hard-coded to handle003.style.msTransform \r\n      handle003.style[transformPrefix] = \"scale(0.5,0.5)\";\r\n      addTransformToList(\"handle003\",0.05,{opacity:1.0},\"linear\",\"handle001:2-=0.05\");\r\n      addTransformToList(\"handle003\",1.50,{scale:\"(2.0,2.0)\"},\"linear\",\"+=0.50\");\r\n      addTransformToList(\"handle003\",0.00,{display:\"none\"});\r\n<\/pre>\n
It turns out that just using transform<\/code> property in most modern browsers will achieve the desired results.  This must be the outcome of many years of standardization by the vendors.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[87,101,49],"_links":{"self":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1272"}],"collection":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":13,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1272\/revisions"}],"predecessor-version":[{"id":1403,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/posts\/1272\/revisions\/1403"}],"wp:attachment":[{"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rpchurchill.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}