search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.7k stars 2.41k forks source link

Global: blinky page transitions #190

Closed toddparker closed 13 years ago

toddparker commented 13 years ago

Pretty much whenever you navigate to a page or use use the back button, you see the page transition in, then there is a flash of white before the new page appears so it's blinky. Sometimes this can blink 2 or more times in a transition. A particularly bad example is when you open and close the full page select menu.

This is an important one to fix up because it effects the whole system.

brianleroux commented 13 years ago

-webkit-backface-visibility:hidden ....should do the trick.

jakemcgraw commented 13 years ago

I can confirm this on iPhone 3G w/ iOS 3.1.3

scottjehl commented 13 years ago

Brian, where would you recommend putting that property? I put it on the body element and I don't see much of a difference.

It may be that we're missing a rule or two in our CSS that allowed jQtouch's animations to run more smoothly. We should look into this.

jakemcgraw commented 13 years ago

This does not occur on iPhone 3G w/ iOS 4.1

kristopher commented 13 years ago

In past projects when working with CSS transitions I would have to set these three CSS rules on the element that I was transitioning to keep it from flashing.

-webkit-transform-style: flat; -webkit-backface-visibility: hidden; -webkit-perspective: 800;

jblas commented 13 years ago

This should be fixed by checkin:

http://github.com/jquery/jquery-mobile/commit/acbec71e29b6acec6cd2087e84e8434fecc0053f

Can someone verify?

toddparker commented 13 years ago

Kin's commit is confirmed to fix this issue on iPad, iPhone and Android 2.2

willard commented 13 years ago

using A4 with phonegap.. i still have the blinking when im using the scrollview with an option scrollMethod = translate and showScrollBars = true

jondewoo commented 12 years ago

Seems the problem is still present in 1.0rc1 (tested on iPad 4.3.2).

As suggested by kristopher, adding :

.ui-page { -webkit-transform-style: flat; -webkit-backface-visibility: hidden; -webkit-perspective: 800; }

to my CSS file resolved it.

toddparker commented 12 years ago

@jderrough - the backface-visibility trick will work, but it consumes a lot of ram so it's very likely that pages will get slow or even crash the browser. If you have light pages, it might be ok. It's too dangerous to add this globally for us.

jondewoo commented 12 years ago

Thanks for the info. I'll get back to you if any of these occur. For now, the blinking happens the first time I dynamically load a page in a series using Ajax on local files (replacing styles, content, launching scripts). Although the 'blinky page' is quite light, the loading process is intense IO-wise. I managed to place my call to changePage() when it is all done, but still the blinking remained.