[IPAD] change page flicking in landscape

[2ds-media]

Tested on IPAD 1/ IOS 4.3.3. In my Ipad presentation, in landscape orientation only, after changing page once correctly, the transitions flicking. Every page changes are flicking with any Fx transitions. There is no problem in portrait mode.

If I switch back to the beta2 with the exact same code, I don't have this issue.

Hope it can help to improve the library.

[jblas]

@2ds-media

Do you have a sample you can show us that exhibits this problem? I'm not seeing it when using:

http://jquerymobile.com/test/

or

http://jquerymobile.com/test/docs/pages/page-transitions.html

[2ds-media]

Here is a sample :

Beta 3
http://test.2ds.be/ipad/

Beta 2 => page transition works fine
http://test.2ds.be/ipad/beta2.html

To reproduce the issue, in landscape mode, swipe left twice or more to navigate in the presentation then swipe right and go back to the home page. then try again to swipe or use a navigation link on the page. It should start to flick during the transition.

Another way to reproduce the issue is to start the presentation in portrait mode, navigate at least to another page then change the orientation to landscape and try to navigate using a swipe or a button. It should start to flick during the transition.

[jblas]

@2ds-media

Thanks for the A/B samples that will help tremendously. I'm assuming you accidentally closed the issue, so I'll go ahead and reopen. :-)

[jblas]

@scottjehl @toddparker

The flashing is due to focus() being set on the actual page element when transitioning to pages with no .ui-title. This was introduced in beta 3 by this checkin:

97539ed

Perhaps we should be delaying the setting of focus until transitions are complete.

[jblas]

@scottjehl @toddparker

Ok, the flashing isn't due to the actual focus() call, but instead, is related to the CSS outline property which is enabled when the element has focus. This seems to be the same flashing problem that occurs when transitioning with a text input focused. I'm able to stop the flashing with:

.ui-page { outline: none; }

I need to figure out if outline is an inheritable property or not.

[scottjehl]

Outline doesn't inherit. Go for it.

On Sep 20, 2011, at 2:54 PM, Kin Blas wrote:

@scottjehl @toddparker

Ok, the flashing isn't due to the actual focus() call, but instead, is related to the CSS outline property which is enabled when the element has focus. This seems to be the same flashing problem that occurs when transitioning with a text input focused. I'm able to stop the flashing with:

.ui-page { outline: none; }

I need to figure out if outline is an inheritable property or not.

Reply to this email directly or view it on GitHub:
#2474 (comment)

[2ds-media]

@jsblas I tested your fix. Perfect ! It works well now :) Nice work. Thanks

[toddparker]

@jblas - Lock 'n load.

[jblas]

Fix landed on the HEAD:

432b876