It took a bit of experimentation but the ultimate fix turned out to be quite simple. If the browser’s JavaScript interpreter strips off the second parameter then we can just duplicate the first one. It might not give exactly the intended result if the second parameter was not originally equal to the first but it’ll work. All parts of the demo will now work in recent versions of the Microsoft browsers as well as Firefox, Chrome, and Safari. It works in Opera as well but upon installing it and testing this blog site it turns out that the discrete-event simulation stuff does not work in Opera. I guess that will be Monday’s activity.
Here’s the updated code as described.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
} else if (keyList[ii] == "scale") { var temp = element.style.transform; // <- this is the problem child in IE and Edge var locStart = temp.search("scale"); var temp1 = temp.substr(locStart); var locEnd = temp1.indexOf("\)"); pStart = temp1.substr(5,locEnd-(5-1)); //if only one parameter here (in pStart) then dummy in a second one var len = pStart.length - 1; if ((pStart.charAt(0) == "(") && (pStart.charAt(len) == ")")) { var s = pStart.substr(1,len-1); var arr = s.split(","); if (arr.length == 1) { //IE or Edge has stripped off second parameter pStart = "("+arr[0]+","+arr[0]+")"; //dummy a duplicate into the second one } } pEnd = trans.scale; |
The reason the process didn’t create the expected animation was because with the second parameter missing from pStart
, the script had no way to interpolate between the second value of pStart
and the second parameter of pEnd
. The initial transform was applied correctly but subsequent ones all read something like this. IE might not do the expected thing with the second parameter but it isn’t going to be happy trying to process a value of NaN
.
1 |
handle003.style.transform.scale(0.5166666666666,NaN); |