Two serial webkit transitions does not work on some android devices

Question

I want to have two webkitTransitions applied one after one to the same div element for webkitTransform property. Here is the code:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", init);
        function init() {
            var d1 = document.getElementById("d1");

            d1.style.webkitTransition = "-webkit-transform 1s linear";
            d1.style.webkitTransform = "translate(-100px,0px)";

            setTimeout(function(){
                d1.style.webkitTransition = "-webkit-transform 1s linear";
                d1.style.webkitTransform = "translate(-150px,0px)";
            }, 1500);
        }
    </script>
       <style type="text/css">
           div#d1 {
               position: absolute;
               background-color: rgba(13,15,112,122);
               width: 200px;
               height: 200px;
               overflow: hidden;
           }
       </style>
</head>
<body>
<div id="d1"/>
</body>
</html>

http://bit.ly/UnTqAV

This results to the second transform is applied directly without any transition on Android 4.0.4 Samsung tablets default browser (GT-P5110 GT-P3110 ...). Other devices work fine. I've tried using with/without 3d postfix and open GL switched on/off. Does anyone have the same experience?

Will the transitions work when applied via a stylesheet? – m90 Dec 27 '12 at 10:13 — m90, Dec 27 '12 at 10:13

score 0 · Answer 1 · answered Jun 11 '13 at 10:11

We had the same problem, it's a (big) bug of Android 4.0.4 WebView. We had to write again some animations on our webapp. The trick is to use the CSS matrix property for every transformation, instead of the specific translate, scale, and so on.

This link is very nice to learn more on 2D matrices: http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html

Two serial webkit transitions does not work on some android devices

1 Answers1