Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#16066 closed defect (fixed)

dojox/mobile: adapt to the new full-screen mode of Safari in iOS6

Reported by: Adrian Vasiliu Owned by: Eric Durocher
Priority: high Milestone: 1.8.1
Component: DojoX Mobile Version: 1.8.0
Keywords: ios6 Cc:
Blocked By: Blocking:

Description

In iOS6, Mobile Safari introduced a full-screen mode available only in landscape orientation. Now, dojox/mobile's views don't behave optimally when this new browser feature is used, with respect to: a) the (optional) mechanism for hiding the address bar and b) the placement of fixed footers.

How to reproduce:

  1. Load for instance dojox/mobile/tests/test_ScrollableView-demo-long.html on iOS6 in portrait orientation (tested on iPhone 4S). This test uses the config option mblAlwaysHideAddressBar: true.

=> So far so good. The address bar is hidden, and the fixed footer is correctly placed at the bottom of the page.

  1. Turn the phone in landscape orientation.

=> So far so good, the address bar is still hidden and the footer is still at the expected bottom position.

  1. Touch the "full screen" button in the lower-right corner of Safari's bottom bar.

=> The address bar is still correctly hidden, the fixed header is still at the correct position on the top of the page (so far so good), but the fixed footer is NOT at the bottom of the page. That is, the additional area revealed by the full-screen mode is not used by the dojox/mobile app. Instead, switching to full-screen only has the effect of translating the view toward the top. Changing the orientation to portrait then landscape again puts the app in the optimal full-screen state.

  1. Touch the "full screen" button again to switch off the full-screen mode.

=> The address bar is now visible (it shouldn't), and the fixed footer is NOT visible (it should be visible). Again, changing the orientation to portrait then landscape again puts the app in the correct state.

The same can be reproduced for instance with test_SwapView-demo.html, where the fixed footer is a PageIndicator. In full-screen mode, the address bar is visible (it shouldn't) and the page indicator is not visible (it should be visible).

If the app doesn't configure the mobile view for hiding the address bar, the behavior is the following:

  • Switching to full-screen has the same effect of translating the view toward the top, thus the address bar is unexpectedly hidden while the fixed footer is no longer on the bottom.
  • However, in this case switching off the full-screen mode puts the app back in the expected state (address bar visible and fixed footer at the bottom).

Attachments (1)

patch16066.patch (2.3 KB) - added by Adrian Vasiliu 7 years ago.
Fix for iOS6: use resize events to react when entering or exiting the full-screen mode of Safari in iOS6 - Adrian Vasiliu, IBM, CCLA

Download all attachments as: .zip

Change History (10)

comment:1 Changed 7 years ago by Adrian Vasiliu

The cause of the problem is very simple: on iOS, we rely on orientationchange events for updating the view (such that the address bar and the fixed header/footer are at the expected positions). This job is done by dojox/mobile/common. But on iOS6 entering or existing the new full-screen mode only generates resize events. Hence the missing update of the mobile view.

The attached patch16066.patch goes the same way as we go already for reacting on Android to resize events caused by showing/hiding the virtual keyboard. Tested successfully on iPhone4S/iOS6, with and without the flags for hiding the address bar.

Side-note: according to my tests in iPhone4S/iOS6, there are 2 resize events when entering the full-screen size mode (after the first event the height change is already done), and only one resize event when exiting the full-screen mode... In our patch, we only react to events which correspond to height changes, hence we don't do the job twice. Still, this second event is surprising.

Last edited 7 years ago by Adrian Vasiliu (previous) (diff)

Changed 7 years ago by Adrian Vasiliu

Attachment: patch16066.patch added

Fix for iOS6: use resize events to react when entering or exiting the full-screen mode of Safari in iOS6 - Adrian Vasiliu, IBM, CCLA

comment:2 Changed 7 years ago by Eric Durocher

Keywords: ios6 added

comment:3 Changed 7 years ago by cjolif

Milestone: tbd1.8.2
Priority: undecidedhigh

comment:4 Changed 7 years ago by cjolif

Type: featuredefect

comment:5 Changed 7 years ago by cjolif

Milestone: 1.8.21.8.1

comment:6 Changed 7 years ago by cjolif

In [29764]:

refs #16038, #16066. Fixes two ios6 issues. One with ScrollableView? and one with resizing when activating Safari full screen mode. Thanks Eric Durocher & Adrian Vasiliu (IBM, CCLA). !strict.

comment:11 Changed 7 years ago by cjolif

In [29765]:

refs #16038, #16066. Fixes two ios6 issues. One with ScrollableView? and one with resizing when activating Safari full screen mode. Backport to 1.8 branch.Thanks Eric Durocher & Adrian Vasiliu (IBM, CCLA). !strict.

comment:12 Changed 7 years ago by cjolif

Resolution: fixed
Status: newclosed

comment:13 Changed 7 years ago by Adrian Vasiliu

Unfortunately, there is a side-effect that I missed when I tested my patch. See #16202.

I've put in a comment of this ticket what I can say for now about it. I'll work on it. I'm not sure if the best is to reopen this ticket, or to just fix the side-effect in a patch for #16202.

Last edited 7 years ago by Adrian Vasiliu (previous) (diff)
Note: See TracTickets for help on using tickets.