[IPAD] change page flicking in landscape #2474

Closed
2ds-media opened this Issue Sep 19, 2011 · 9 comments

Projects

None yet

4 participants

@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
Contributor
jblas commented Sep 19, 2011

@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.

@2ds-media 2ds-media closed this Sep 19, 2011
@jblas
Contributor
jblas commented Sep 19, 2011

@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 jblas reopened this Sep 19, 2011
@jblas jblas was assigned Sep 19, 2011
@jblas
Contributor
jblas commented Sep 20, 2011

@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
Contributor
jblas commented Sep 20, 2011

@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
Contributor

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
Contributor

@jblas - Lock 'n load.

@jblas
Contributor
jblas commented Sep 20, 2011

Fix landed on the HEAD:

432b876

@jblas jblas closed this Sep 20, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment