Clever Geek Handbook

CSS3 animation not working on Android 4.2

I am developing an application using Worklight where I need to place a small animated image using CSS. In tests on Android 4.4 devices it works fine, I ran some tests on Android 4.2 and 4.1 devices and this same animation doesn't work. The iPhone 5 works fine.

My code:

<html>

    <style type="text/css">

        .image-arrow {
          content: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
          /* content: url("hand.png"); */
          /* display: inline-block; */
          width: 100px;
          text-align: center;
          margin: auto;
          overflow: visible;  
          /* position: absolute; */
        }

        .element-animation{
          -webkit-animation: 4.0s ease-in-out;
          -webkit-animation-name: animationFramesWebKit;
          -webkit-animation-iteration-count: 2;
          -webkit-transform-origin: 60% 100%;
        }

        @-webkit-keyframes animationFramesWebKit {
          0% {
            -webkit-transform:  rotate(0deg);
          }
          8% {
            -webkit-transform:  rotate(0deg);
          }
          18% {
            -webkit-transform:  rotate(-25deg) ;
          }
          25% {
            -webkit-transform:  rotate(25deg) ;
          }
          32% {
            -webkit-transform:  rotate(-25deg) ;
          }
          41% {
            -webkit-transform:  rotate(25deg) ;
          }
          50% {
            -webkit-transform:  rotate(-25deg) ;
          }
          61% {
            -webkit-transform:  rotate(25deg) ;
          }
          70% {
            -webkit-transform:  rotate(-25deg) ;
          }
          85% {
            -webkit-transform:  rotate(25deg) ;
          }
          100% {
            -webkit-transform:  rotate(0deg);
          }
        }
    </style>

    <body>
        <div class="top-body image-arrow element-animation"></div>
    </body>
</html>

If I create a file with this HTML and open on Android 4.2 it doesn't work but on Android 4.4 works fine. Any idea what Android 4.2 and below does not support, and if there is any alternative for this?

+3


source to share


2 answers


In past versions of Webkit, there is a problem with rendering animations for pseudo-elements such as :after

and :before

. In your case, the class .image-arrow

has a property content:

that is usually reserved for use only in pseudo-elements. I suggest you replace it with background-image

, for example:

.image-arrow {
   background-image: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
   /* content: url("hand.png"); */
   /* display: inline-block; */
   width: 100px;
   text-align: center;
   margin: auto;
   overflow: visible;  
   /* position: absolute; */
}


This issue (now resolved) with Webkit is well documented: http://trac.webkit.org/changeset/138632

Chrome PC implemented this after version 26, iOS after 6.1 and Android on 4.4.

+6


source


Change the .image arrow below:

   .image-arrow {
      background-image: url("http://i104.photobucket.com/albums/m163/bl82/arrowup-green.png");
      background-size: 100px 100px;
      /* content: url("hand.png"); */
      /* display: inline-block; */
      width: 100px;
      height: 100px;
      text-align: center;
      margin: auto;
      overflow: visible;  
      /* position: absolute; */
    }


In many versions of Android WebView, several css3 properties are not working correctly.

+1


source






More articles:


All Articles