PhoneGap iOS应用上的页面加载闪烁

Question

My PhoneGap application uses slide in and slide out animations using entirely CSS animations.

You can find the project I based my app on here .

As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.

I cached the images using CSS to improve image load but again no luck. I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:

    webkit-backface-visibility: hidden;

You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.

Answer 1

After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.

Answer 2

这是由于您的JS文件，如果您在html页面上加载了更多的js文件，那么当您在phonegap中开发应用程序时，您将需要一些时间才能在phonegap应用程序中找到该filck，然后尝试使用单页架构来开发必须是更好的选择，即使我遭受这个问题。