New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup disappears on iDevice with orientation change in standalone mode #5153

Closed
ToddThomson opened this Issue Oct 10, 2012 · 10 comments

Comments

Projects
None yet
5 participants
@ToddThomson

Testing with release 1.2, I've found that popups disappear on an orientation change when the web app is in standalone mode. If the web app is running in mobile safari mode, the popup changes position properly and is not hidden.
This issue is reproducible by going to m.integra-international.net and pressing the "share" button on the top right of the header bar ( which brings up a popup ). Try in standalone mode to reproduce the issue.

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Oct 10, 2012

Contributor

I can reproduce this issue at http://jquerymobile.com/test/docs/config/iOSFullscreen.html in web-app mode on iPhone 4S iOS 6 but not on iPad (same OS).

On iPad the popup needs a non-stop 270 degree turn to disappear but comes back after the next orientation change.

Contributor

MauriceG commented Oct 10, 2012

I can reproduce this issue at http://jquerymobile.com/test/docs/config/iOSFullscreen.html in web-app mode on iPhone 4S iOS 6 but not on iPad (same OS).

On iPad the popup needs a non-stop 270 degree turn to disappear but comes back after the next orientation change.

@ToddThomson

This comment has been minimized.

Show comment
Hide comment
@ToddThomson

ToddThomson Oct 10, 2012

Using the iPhone simulator and the safari debugger I found that the issue is that for some reason the class ui-selectmenu-hidden is assigned to the popup. This sets the top,left position to -9999,-9999.
Hopefully that will help you find the bug.

Using the iPhone simulator and the safari debugger I found that the issue is that for some reason the class ui-selectmenu-hidden is assigned to the popup. This sets the top,left position to -9999,-9999.
Hopefully that will help you find the bug.

@ToddThomson

This comment has been minimized.

Show comment
Hide comment
@ToddThomson

ToddThomson Oct 10, 2012

After reviewing your popup code, once into your _resizeTimeout loop, your logic to remove the class ui-selectmenu-hidden seems fine. The only way for ui-selectmenu-hidden to be set without it being removed from within your _resizeTimeout loop is if it is set AFTER your _resizeTimeout loop is finished. This can only mean that _handleWindowOrientationchange is being called after your _resizeTimeout loop has finished.
Hope that helps.

After reviewing your popup code, once into your _resizeTimeout loop, your logic to remove the class ui-selectmenu-hidden seems fine. The only way for ui-selectmenu-hidden to be set without it being removed from within your _resizeTimeout loop is if it is set AFTER your _resizeTimeout loop is finished. This can only mean that _handleWindowOrientationchange is being called after your _resizeTimeout loop has finished.
Hope that helps.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 11, 2012

Contributor

That's a good point. I guess I was relying on orientationchange being triggered before any resizing takes place.

Contributor

gabrielschulhof commented Oct 11, 2012

That's a good point. I guess I was relying on orientationchange being triggered before any resizing takes place.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 11, 2012

Contributor

Damn! I can't reproduce this on my iPod now that I've upgraded to iOS 6 ☹

Contributor

gabrielschulhof commented Oct 11, 2012

Damn! I can't reproduce this on my iPod now that I've upgraded to iOS 6 ☹

@ToddThomson

This comment has been minimized.

Show comment
Hide comment
@ToddThomson

ToddThomson Oct 11, 2012

@gabrielschulhof First, I have to say your disembodied head icon is fantastic!
A great debug setup for mobile development ( webkit especially ) is Mac mini running iOS simulator with Safari web developer tools enabled for the simulator. With iOS 6 you can debug web apps running on the physical iOS device as well.

@gabrielschulhof First, I have to say your disembodied head icon is fantastic!
A great debug setup for mobile development ( webkit especially ) is Mac mini running iOS simulator with Safari web developer tools enabled for the simulator. With iOS 6 you can debug web apps running on the physical iOS device as well.

@ToddThomson

This comment has been minimized.

Show comment
Hide comment
@ToddThomson

ToddThomson Oct 11, 2012

@gabrielschulhof What was the reason for moving the popup off the viewport on an orientationchage?

@gabrielschulhof What was the reason for moving the popup off the viewport on an orientationchage?

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 12, 2012

Contributor

The reason the popup needs to move is that, upon orientationchange, it may end up out of view, because the page size changes. That's also why it must be centred on the window - the link that opened the popup may have gone out of view, and we must not jerkily scroll the page to the location where the link has ended up only to place the popup over it again.

Contributor

gabrielschulhof commented Oct 12, 2012

The reason the popup needs to move is that, upon orientationchange, it may end up out of view, because the page size changes. That's also why it must be centred on the window - the link that opened the popup may have gone out of view, and we must not jerkily scroll the page to the location where the link has ended up only to place the popup over it again.

gabrielschulhof added a commit that referenced this issue Oct 25, 2012

[popup] Initiate resize expectation during orientationchange -- Fixes #…
…5153

Also, do not rapid-hide the popup during orientationchange, so if an orientationchange happens without any subsequent resize events (such as a 180 degree rotation), the popup doesn't blink out and in

scottjehl pushed a commit that referenced this issue Oct 31, 2012

Scott Jehl
Merge branch 'master' into tables
* master: (24 commits)
  [select] Implement _destroy() -- Fixes #4661
  Changing ok out to equal; it is more appropriate for this test
  Changing test to make sure it fails when code change is not there
  Renamed class ui-selectmenu-hidden to ui-popup-hidden -- Fixes #5217
  [popup] Rename function _maybeRefreshTimeout to _expectResizeEvent
  [popup] "detached retina" fix - the window height on iStuff with a retina display seems to fluctuate by one pixel during scroll, causing a spurious resize event right after popup open, even though window size is constant during the entire opening sequence
  Added "mobileinit" handler to set up options
  Whitespace
  Changed urlParseRE to ignore space at beginning. This is expected behavior in browsers. This used to result in pages changing to "%20destination.html" instead of the now "destination.html". Fixes issue #4882
  List autodividers: use trim() to avoid issues with newlines and spaces in markup. Fixes #5197. Thanks @demonslord !
  [popup] Initiate resize expectation during orientationchange -- Fixes #5153
  Select: headers of custom select menus shouldn't inherit the popup corner styling. Fixes #5215.
  [popup] Correctly handle the case when the fallback transition is "none" -- Fixes #5189
  [custom select] Mark as closed after dialog closes - Re: #5195 - Thanks martenbohlin
  [slider] Adding new behaviour to widget definition
  [select] Adding new behaviour to widget definition
  [checkboxradio] Adding new behaviour to widget definition
  [formReset] New behaviour that allows form widgets to become aware of the fact that the form they are in has been reset
  [popup] Only rapid-open the popup if it is open -- Fixes #5157
  Updated third-party libs for Backbone/Require Demo App
  ...
@robinschaaf

This comment has been minimized.

Show comment
Hide comment
@robinschaaf

robinschaaf Dec 19, 2012

Hi, I'm entirely new/don't know about how these bug fixes work, but I'm having this issue in my phonegap app using JQM 1.2.0 on ios6. In the native safari on ios6 it works OK-ish (It's an image and turns teeny-teeny when going portrait to landscape and setting the max-height-30px, I'll need to play around with that).
Anyway, it looks like a fix has been made, will this be available for 1.2.1 or when will it be available?
Many Thanks!

Hi, I'm entirely new/don't know about how these bug fixes work, but I'm having this issue in my phonegap app using JQM 1.2.0 on ios6. In the native safari on ios6 it works OK-ish (It's an image and turns teeny-teeny when going portrait to landscape and setting the max-height-30px, I'll need to play around with that).
Anyway, it looks like a fix has been made, will this be available for 1.2.1 or when will it be available?
Many Thanks!

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Dec 19, 2012

Member

@gabrielschulhof - Did you cherry-pick this for 1.2.1 or does it need to wait for 1.3 (I see it's not a small change)?

Member

jaspermdegroot commented Dec 19, 2012

@gabrielschulhof - Did you cherry-pick this for 1.2.1 or does it need to wait for 1.3 (I see it's not a small change)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment