0

I'm creating an Android app with PhoneGap. I'm using HTML + CSS + jQuery, I don't use jQueryMobile, or any other mobile frameworks, because it's a simple app.

My problem is that, if I set android:hardwareAccelerated="true", the app is much slower than I set it android:hardwareAccelerated="false", but when I set hardware accelerated false, my CSS3 transitions don't work well.

For example I have a transparent cover div, when the sidebar is open:

    div.cover {
        position:absolute;
        top:100px;
        bottom:0;
        left:0;
        right:0;
        z-index:99;
        background:rgba(0,0,0,0.3);
        visibility:hidden;
        opacity:0;
        transition:all 0.5s ease-out;
        -webkit-transition:all 0.5s ease-out;
    }

    div.cover-in {
        visibility:visible;
        opacity:1;
        transition:all 0.5s ease-out;
        -webkit-transition:all 0.5s ease-out;
    }

I'm adding and removing cover-in class to div.cover with jQuery to apply the effect.

With hardware accelerated on it works, but the whole app is slower, with hardware accelerated off there's a black blink before the effect fires.

Is there any suggesstion to fix this problem?

petrovics.balint
  • 1
  • Maybe try this: https://github.com/jquery/jquery-mobile/issues/5431 I know you said you aren't using jQuery mobile, but still seems like this might help. Also, might wanna try disabling page zoom, and somethings mentioned here (somewhat similar): http://stackoverflow.com/questions/18728573/jquery-mobile-android-page-flash-during-transition – Solomon Closson Nov 27 '13 at 08:26
  • Thanks for your answer, but I think I have a different problem. It's not only the blinking. For example I also have a sliding panel with CSS3 transition, and with hardware accelerated it works fine, but without it, the animation doesn't fires and my panel simply doesn't shown up. – petrovics.balint Nov 27 '13 at 08:45

0 Answers0