How to stop page flickering when panel is open/close in phone gap android

Question

I am trying to create and facebook like panels so tried to use Panels from JQuery mobile link then i make the header and footer position to fixed and disabled the data-animate.Know the issue is when i open/close the panel its flickers is also applied ui-panel-wrap-content position to fixed when panel is opend and position to absolute when panel is closed so only the panel can be scrolled and not the page content. Can any one tell me how to stop flickering. Any idea is appreciated. Thanks in advance.

score 0 · Answer 1 · edited Oct 01 '13 at 07:10

0

Add this css

.ui-page {
        -webkit-backface-visibility: hidden;
    }

edited Oct 01 '13 at 07:10

user568109

47,225
17
99
123

answered Oct 01 '13 at 06:53

Ved

2,701
2
22
30

score 0 · Answer 2 · answered Oct 01 '13 at 07:57

0

You can try by using the following code

.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page
{
overflow: visible;
}

Also add the following code in manifest file

android:hardwareAccelerated="false"

Hope it will help.

answered Oct 01 '13 at 07:57

sourav

676
5
21

hey i tried your code but if i do any changes in the rotateY than its not re-arranging the page when the panel is closed. – Neerav Shah Oct 01 '13 at 11:01

score 0 · Answer 3 · answered Oct 18 '14 at 17:55

0

You can preload the side panel content. This smooths the transition and removes any delay in loading the panel. This then means the white background never shows.

I'll update later with the code required to do the preload.

answered Oct 18 '14 at 17:55

Phill Healey

3,084
2
33
67

How to stop page flickering when panel is open/close in phone gap android

3 Answers3