CODEWITHSUNDEEP
androidcsscordova
Jacky Shek
Jacky Shek

Reputation: 955

Phonegap Android cannot render mask image of CSS , but work for iOS

I have added an animation to do the image masking, but it just not work for android. Is there any missing css for android?

        @-webkit-keyframes bannerPic {

        0%{ -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0)5%);}
        50%{ -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)55%);}
        100%{ -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,1) 100%, rgba(0,0,0,0)100%);}
        }



       .bannerMoveRight
       {
        -webkit-animation: bannerPic 5s linear;
        -moz-animation:bannerPic 5s linear;
        animation:bannerPic 5s linear;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
       }
      .bannerMovePause
      {
        -webkit-animation-play-state: paused;
      }
      .bannerMoveRun
      {
        -webkit-animation-play-state: running;
      }

Upvotes: 1

Views: 264

Answers (1)

Jacky Shek
Jacky Shek

Reputation: 955

Finally, find out that the android Google API 22 which is work with -webkit-mask, but does not work in android Google API 23.

My opinion:

After development with Phonegap and native language of android and iOS, I strongly suggest that use native language of android or iOS to do your app development. Phonegap use WebView to generate the app which cause a huge problem that developer cannot control the layout easily on different device.

Upvotes: 1

Related Questions