top

JavaScript animations not working on 2012 platform

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Position and length style calculation on 2012 platform when the units are not specified.

According to the standards all position and length values in CSS should be given along with the proper unit. A problem appears when the style of some element is changed dynamically in the source code, what is a common practice for simple JavaScript animations. In such case the units value is cleared by default and the results differ between 2012 and older platforms.

Webkit 2012

Values without specified unit are ignored

Maple 2010-2011

the unit px is added automatically and after that the style is applied

Solution

Always add 'px' to the length values when dynamically changing elements style.

Source Files

Note

The files needed for the sample application are here.

Bad example

<script>
    function onLoad(){
        document.getElementById("box").style.width = 150;
        document.getElementById("box").style.height = 50;
    }
</script>
<body onload="onLoad()" style="background-color: #ffffff">
    <div id="box" style="background-color: orange;">
        unit test
    </div>
</body>

Good example

<script>
    function onLoad(){
        document.getElementById("box").style.width = 150 + 'px';
        document.getElementById("box").style.height = 50 + 'px';
    }
</script>
<body onload="onLoad()" style="background-color: #ffffff">
    <div id="box" style="background-color: orange;">
        unit test
    </div>
</body>