Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#17539 closed defect (wontfix)

iOS (6 and 7) - Switching from landscape to portrait when virtual keyboard is displayed causes wrong resize of Views

Reported by: Sebastien Pereira Owned by: Adrian Vasiliu
Priority: undecided Milestone: tbd
Component: DojoX Mobile Version: 1.9.1
Keywords: Cc: Adrian Vasiliu, Patrick Ruzand
Blocked By: Blocking:

Description (last modified by Sebastien Pereira)

Step to reproduce: 1 - open a view which contain an input field (a test sample is attached) 2 - enter some text in the input field (do not close the virtual keyboard) 3 - move the device in landscape mode (do not close the virtual keyboard) 4 - move the device back to the portrait mode 5 - close the virtual keyboard

Result: the view is wrongly resized. Note: this can be reproduce on ios6.

Attachments (8)

test_View.html (1.8 KB) - added by Sebastien Pereira 5 years ago.
Sample test case
step2.PNG (38.1 KB) - added by Sebastien Pereira 5 years ago.
step3.PNG (37.5 KB) - added by Sebastien Pereira 5 years ago.
step4.PNG (43.8 KB) - added by Sebastien Pereira 5 years ago.
step5.PNG (16.2 KB) - added by Sebastien Pereira 5 years ago.
test_View2.html (3.7 KB) - added by Adrian Vasiliu 5 years ago.
Variant with minor changes plus annotations
test-without-Dojo-issue1.html (2.5 KB) - added by Adrian Vasiliu 5 years ago.
Pure HTML test for first Safari issue
test-without-Dojo-issue2.html (1.7 KB) - added by Adrian Vasiliu 5 years ago.
Pure HTML test for second Safari issue

Download all attachments as: .zip

Change History (21)

Changed 5 years ago by Sebastien Pereira

Attachment: test_View.html added

Sample test case

Changed 5 years ago by Sebastien Pereira

Attachment: step2.PNG added

Changed 5 years ago by Sebastien Pereira

Attachment: step3.PNG added

Changed 5 years ago by Sebastien Pereira

Attachment: step4.PNG added

Changed 5 years ago by Sebastien Pereira

Attachment: step5.PNG added

comment:1 Changed 5 years ago by Sebastien Pereira

Cc: Adrian Vasiliu Patrick Ruzand added
Description: modified (diff)
Summary: iOS7 - View is wrongly resized on orientation change with virtual keyboard displayed.iOS7 - Switch from landscape to portrait when virtual keyboard is displayed causes wrong resize of Views.

comment:2 Changed 5 years ago by Adrian Vasiliu

Note: this can be reproduce on ios6.

Would be interesting to know if it's a recent regression - can it also be reproduced with Dojo 1.9.0? 1.8?

And can it also be reproduced with mblHideAddressBar at false in dojoConfig?

comment:3 in reply to:  2 Changed 5 years ago by Sebastien Pereira

Replying to Adrian:

can it also be reproduced with Dojo 1.9.0? 1.8?

Yes, same behavior with 1.9.0 and 1.8.5 on ios7 (not tested on io6)

And can it also be reproduced with mblHideAddressBar at false in dojoConfig? Yes, same behavior with mblHideAddressBar at false (tested on trunk)

comment:4 Changed 5 years ago by Sebastien Pereira

On possible workaround would be to blur the active element when the orientation changes to force the keyboard to hide before the resizing calculation.

Unfortunately it doesn't work: if we start from a landscape orientation and move the device to a portrait orientation, it does close the keyboard but the view still ends up wrongly resized.

It would only prevent this case to happen: portrait+keyboard=Ok > landscape+keyboard=ok > portrait+keyboard=KO and would give give: portrait+keyboard=Ok > landscape=ok > portrait=ok

comment:5 Changed 5 years ago by Patrick Ruzand

#17534 is a duplicate of this ticket.

comment:6 Changed 5 years ago by Patrick Ruzand

Milestone: tbd1.10

comment:7 Changed 5 years ago by Patrick Ruzand

Owner: set to Adrian Vasiliu
Status: newassigned

comment:8 Changed 5 years ago by Adrian Vasiliu

Summary: iOS7 - Switch from landscape to portrait when virtual keyboard is displayed causes wrong resize of Views.iOS (6 and 7) - Switching from landscape to portrait when virtual keyboard is displayed causes wrong resize of Views

Some elements:

  • Reproduced with the current master on various iOS 6.x and 7.x devices, although a bit less systematically and less clearly on iPad 4 iOS 6.0.1 than on the remaining devices (iPad 4 iOS 7.0.6, iPad Air iOS 7.0.6, iPhone 5 iOS 7.0.6, iPhone 4S iOS 6.0.1).
  • Typing characters into the input field is not necessary for reproducing.
  • In my eyes, even if it would solve the sizing issue totally (which is not the case), a workaround which would consist in hiding the keyboard upon orientation change would be hardly acceptable, because the user can change the orientation while entering text precisely to get more space and wouldn't expect the keyboard to be hidden.
  • The issue is reproducible with pure HTML, without any Dojo code. I tried many variants of viewport configuration (with and without width=device-width / height=device-height in the meta tag, etc.), and various additional CSS settings (such as 100% for width/height of html, body, mblView). Nothing did the trick.
  • At this stage, this looks as a Safari/iOS bug.
  • Note that I do not reproduce when the HTML content is shown in a WebView? container, for instance by doing "add to home screen" on an iPhone (should be also OK for Cordova apps). Further searches may lead to better findings, but for now this would be the ideal workaround for this Safari/iOS issue.
Last edited 5 years ago by Adrian Vasiliu (previous) (diff)

Changed 5 years ago by Adrian Vasiliu

Attachment: test_View2.html added

Variant with minor changes plus annotations

Changed 5 years ago by Adrian Vasiliu

Pure HTML test for first Safari issue

Changed 5 years ago by Adrian Vasiliu

Pure HTML test for second Safari issue

comment:9 Changed 5 years ago by Adrian Vasiliu

Trying to reproduce in pure HTML (without Dojo), I found two issues hurting in different conditions:

  1. The attached test-without-Dojo-issue1.html has a content reduced to just:
    <input type="text" value="touch here"><br/>
    <div class="spacer"></div>
    

plus

<style>
.spacer {
	background-color: lightgreen;
	width: 50px;
	/* increasing the height to 700px avoids the issue in some cases */
	height: 50px;
}
</style>
  1. The attached test-without-Dojo-issue2.html has the same HTML content as the original test_View.html except that there is no Dojo:
    <div>
    	<h1>View 1</h1>
    	<label for="inputText">Input:</label><input>
    	<ul>
    		<li>View 2</li>
    		<li>View 3</li>
    	</ul>
    </div>
    <div>
    	<h1>View 2</h1>
    	<ul>
    		<li>item</li>
    	</ul>
    </div>
    <div>
    	<h1>View 3</h1>
    	<div>item</div>
    </div>
    

Also attached:

  1. test_View2.html which is variant of the original test_View.html with minor changes such as using li tag instead of div for list items etc., and contains comments describing the behavior on various devices (the other attached test files also contain such comments).

The results for these 3 test cases on 6 iOS devices (3 iOS 7.x and 3 iOS 6.x, 2 iPad and 1 iPhone for each) are quite puzzling, and seem to show that we may face a combination of two distinct Safari/iOS issues. The factors which appear to matter vary depending on the OS *and* device (screen size?):

  • Height of the content (put in evidence by test-without-Dojo-issue1.html)
  • Presence or absence of height:device-height in the viewport meta tag in addition to width:device-width (put in evidence by all tests)
  • Address bar hidding enabled or disabled (put in evidence by test_View2.html).

Here are the testing results:

test-withoutDojo-issue1.html:

  • With width=device-width only in the viewport meta tag:
    • KO on iPad Air iOS 7.0.6 (OK by "add to home screen", or by spacer height increased to 700px)
    • KO on iPad 4 iOS 7.0.6 (OK by "add to home screen", or by spacer height increased to 700px)
    • KO on iPhone 5 iOS 7.0.6 (OK by "add to home screen", or by spacer height increased to 700px) OK on iPhone 4S iOS 6.0.1 (for any spacer height, or without spacer)
    • OK on iPad 4 iOS 6.1.3 (for any spacer height, or without spacer)
    • OK on iPad mini iOS 6.1.3
  • With both width=device-width and height=device-height in the viewport meta tag:
    • OK on iPad Air iOS 7.0.6
    • OK on iPad 4 iOS 7.0.6
    • OK on iPhone 5 iOS 7.0.6 for any spacer height (and without spacer at all)
    • KO on iPhone 4S iOS 6.0.1
    • KO on iPad 4 iOS 6.1.3
    • KO on iPad mini iOS 6.1.3

test-withoutDojo-issue2.html:

  • With width=device-width only in the viewport meta tag:
    • KO on iPad Air iOS 7.0.6 (OK by "add to home screen")
    • KO on iPad 4 iOS 7.0.6 (OK by "add to home screen")
    • OK on iPhone 5 iOS 7.0.6
    • OK on iPhone 4S iOS 6.0.1
    • OK on iPad 4 iOS 6.1.3
    • OK on iPad mini iOS 6.1.3
  • With both width=device-width and height=device-height in the viewport meta tag:
    • OK on iPad Air iOS 7.0.6
    • OK on iPad 4 iOS 7.0.6
    • OK on iPhone 5 iOS 7.0.6
    • KO on iPhone 4S iOS 6.0.1
    • KO on iPad 4 iOS 6.1.3
    • KO on iPad mini iOS 6.1.3

test_View2.html:

  • With width=device-width only in the viewport meta tag:
    • KO on iPad Air iOS 7.0.6 (KO even if hideAddressBar disabled! but OK by "add to home screen")
    • KO on iPad 4 iOS 7.0.6 (KO even if hideAddressBar disabled! but OK by "add to home screen")
    • KO on iPhone 5 iOS 7.0.6 (KO even if hideAddressBar disabled! but OK by "add to home screen")
    • KO on iPhone 4S iOS 6.0.1 (OK if hideAddressBar disabled!)
    • KO on iPad 4 iOS 6.1.3 (OK if hideAddressBar disabled!)
    • OK on iPad mini iOS 6.1.3 (with and without hideAddressBar)
  • With both width=device-width and height=device-height in the viewport meta tag:
    • OK on iPad Air iOS 7.0.6
    • OK on iPad 4 iOS 7.0.6
    • OK on iPhone 5 iOS 7.0.6
    • KO on iPhone 4S iOS 6.0.1 (KO even if hideAddressBar disabled)
    • KO on iPad 4 iOS 6.1.3 (KO even if hideAddressBar disabled)
    • KO on iPad mini iOS 6.1.3 (KO even if hideAddressBar disabled)
Last edited 5 years ago by Adrian Vasiliu (previous) (diff)

comment:10 Changed 5 years ago by Adrian Vasiliu

A synthesis of the test results:

  • For the dojox/mobile test case, disabling the address bar hiding solves the issue on 2 iOS 6.x devices. Fine... but note that a third iOS 6.x device does not have the issue at all! The issue hurts on iPad 4 iOS 6.1.3 while it does not hurt on iPad mini under the same iOS 6.1.3...
  • For all tests (dojox/mobile and pure HTML), all the KO cases under iOS 7.x turn into OK when adding height=device-height to the viewport meta tag. Nice but... see next point.
  • For all tests (dojox/mobile and pure HTML), adding height=device-height is no-go for iOS 6.x: all test cases turn into KO.
  • For all tests (dojox/mobile and pure HTML), all KO cases turn into OK by "add to home screen".
  • test-without-Dojo-issue1.html (with just width=device-width) is OK on all iOS 6.x, and KO on all iOS 7.x devices. Issue specific to iOS 7.x with this viewport meta.
  • test-without-Dojo-issue2.html (with just width=device-width) is OK on all iOS 6.x, and KO on 2 out of 3 iOS 7.x devices... (maybe due to the different screen size).

In practice, this gives the following workarounds for users of dojox/mobile apps that happen to be hurt:

  1. If possible, use "add to home screen" (or, possibly, Cordova - but did not have time to test it yet).
  2. If running iOS 6.x, disable address bar hiding (on iOS 7.x the hiding is anyway made no-op in our code, and this doesn't help in this case...).
  3. If and only if running iOS 7.x, add height=device-height to the viewport meta tag (note however, that we never did a complete testing campaign with this meta tag, so needs careful testing).
Last edited 5 years ago by Adrian Vasiliu (previous) (diff)

comment:11 Changed 5 years ago by Adrian Vasiliu

I wrote:

If possible, use "add to home screen" (or, possibly, Cordova - but did not have time to test it yet).

I did the Cordova test, and I confirm that the issue does not exist for any of the 3 test cases with Cordova 3.4.0 (tested with Xcode 5.0.2 on MacOS 10.9.2) when testing on iPad 4 iOS 7.0.6. This holds with the default viewport meta tag of the generated Cordova project, which contains both width=device-width and height=device-height, and also holds if you follow Cordova's recommandation to remove them for iOS 7. In both cases the issue is absent.

For the Safari iOS 7.x case, since there is no combination of viewport settings working good on both iOS 6 and 7, the dynamic change of the viewport is a possible workaround. I tested successfully this addition to the test files:

<script type="text/javascript">
  require(["dojo/has", "dojo/domReady!"], function(has) {
    if (has("ios") >= 7) {
      var viewport = document.getElementById("viewport");
      viewport.setAttribute("content", 
        viewport.getAttribute("content") + ", height=device-height");
    }
  });
</script>

In theory, some variation around it could be put inside, say, dojox/mobile/common, but this is safer to be done as an easy workaround at application level (it's a pain to interfere with the settings done in the HTML file itself). We may revisit that if we encounter more troubles due to the viewport settings. For now, given the existence of workarounds, I think we can close the ticket as wontfix.

comment:12 Changed 5 years ago by Adrian Vasiliu

Resolution: wontfix
Status: assignedclosed

comment:13 Changed 5 years ago by Patrick Ruzand

Milestone: 1.10tbd
Note: See TracTickets for help on using tickets.