Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#17505 closed defect (wontfix)

dojox/mobile/ScrollableView badly handles resize events caused by keyboard overlay on iOS7/Cordova

Reported by: Patrick Ruzand Owned by: Adrian Vasiliu
Priority: high Milestone:
Component: DojoX Mobile Version: 1.9.1
Keywords: Cc:
Blocked By: Blocking:

Description

This issue only happens on iOS7 AND cordova app. When a ScrollableView? contains input fields, and the field is located at the bottom of the screen (not necessarily at the "very bottom", just in the area where the keyboard will overlap), the view does not scroll to make the input field visible, and the input field loose the focus. This issue seems to be due to some resize() events that are received by the scrollableView and seems to trouble the scroll computation (maybe the reported screen size is different in this cordova context ?) Another effect of this behavior is for "browser overlay" (ie not dojox/mobile/Overlay): due to the bad resize, when the overlay pops up (for example a spin wheel (again, not dojox/mobile/SpinWheel but browser ctrl)) the transparency of the overlay is composed witht he black background of the WebView? and the spin ctrl is very dark and hard to read.

Attached a testcase that reproduces the issue. Should be built as a Cordova app.

Attachments (1)

issue-scrollableview.html (4.9 KB) - added by Patrick Ruzand 6 years ago.
testcase (pruzand, CCLA)

Download all attachments as: .zip

Change History (13)

Changed 6 years ago by Patrick Ruzand

Attachment: issue-scrollableview.html added

testcase (pruzand, CCLA)

comment:1 Changed 6 years ago by Patrick Ruzand

Owner: set to Adrian Vasiliu
Status: newassigned

comment:2 Changed 6 years ago by Patrick Ruzand

Priority: undecidedhigh

comment:3 Changed 6 years ago by Patrick Ruzand

Milestone: tbd1.9.2

comment:4 Changed 6 years ago by Adrian Vasiliu

Adding

height=device-height

to the content attribute:

<meta name="viewport" content="..."/>

fixes the issue (tested so far on iPhone 5 iOS 7.0.2).

Will perform more tests (it is possible that this introduces regressions elsewhere...).

The same meta setting may fix other issues related with virtual keyboard on iOS7.

comment:5 Changed 6 years ago by Adrian Vasiliu

Also tested successfully on iPad 4 iOS 7.0.2 with Cordova 3.0 and 3.1, and tested for non-regression on iOS 6 (iPhone 4S). However, when applying the solution mentioned above, I recommend careful testing in case this additional meta would have side-effects.

comment:6 Changed 6 years ago by Adrian Vasiliu

Milestone: 1.9.2
Resolution: worksforme
Status: assignedclosed

comment:7 Changed 6 years ago by Adrian Vasiliu

See also https://issues.apache.org/jira/browse/CB-4862, which implies that height:device-height must be set (and it is actually set in the default "hello world" cordova project).

However, https://issues.apache.org/jira/browse/CB-4323 goes the opposite way!! It ends with the sentence "iOS 7 issues: Remove the values "width=device-width, height=device-height" from your meta tag "viewport" attribute in your index.html file, see https://issues.apache.org/jira/browse/CB-4323" added to the doc (http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS).

Confusing!

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

comment:8 Changed 6 years ago by Adrian Vasiliu

Milestone: 1.9.2
Resolution: worksforme
Status: closedreopened

Reopened because the solution above works well on iPhone in portrait orientation but badly on landscape... See http://stackoverflow.com/questions/19384348/worklight-6-0-0-1-and-ios-7-keyboard/19409203#19409203 .

According to my tests using Cordova 3.1 on iPhone and iPad under iOS 7, the following does the trick:

Do not define height: device-height in the meta tag, while adding to your input elements (not necessarily Dojo widgets) a listener for "click" events, say

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox">

or

<input onclick="onInputClick(event);">

and define the function as follows:

onInputClick = function(e){
	e.target.focus();
};

Explanation and some remarks:

  • When height:device-height is not present in the meta tag, there is no "focus" event when you tap an input field (adding the device-height fixes that, but creates the side-effect in landscape orientation). Differently, when navigating from an input field to another using the previous/next arrows on the top of the keyboard, the focus event is emitted.
  • dojox/mobile/scrollable listens to the focus event to adjust the scrolling such that that the field is visible once the keyboard is shown. Since there's no focus event when taping the input field, this adjustment is not done...
  • Note that the Cordova 3.1 documentation states: "iOS 7 issues: Remove the values "width=device-width, height=device-height" from your meta tag "viewport" attribute' (http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS). From that it would seem that not using height:device-height is anyway recommended by Cordova. However, ​https://issues.apache.org/jira/browse/CB-4862 seems to imply that height:device-height should be set for iOS 7... Definitely, the changes introduced by iOS 7 are still producing much pain.

The above solution is applicable by the user. Next step: refine a solution inside the library (based on the above one, or a better one). We also need to clarify if we need to support the height:device-height in the meta tag.

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

comment:9 Changed 6 years ago by Adrian Vasiliu

Further investigated the cause of the "missing" focus event, and tracked it down as a possible Cordova 3.1 bug that I reproduced in a Cordova app without Dojo.

I submitted https://issues.apache.org/jira/browse/CB-5115 .

Waiting for a Cordova fix (if the Cordova bug is confirmed), we will not go for a workaround inside Dojo Mobile. Instead, applications can use the workaround from the comment above.

comment:10 Changed 6 years ago by Adrian Vasiliu

Milestone: 1.9.2
Resolution: wontfix
Status: reopenedclosed

comment:11 Changed 6 years ago by Adrian Vasiliu

  • Cordova has tracked down the issue we submitted (without Dojo) as being an iOS bug.
  • I have tested again with the latest iOS update (7.0.3): the picture seems unchanged (same as with 7.0.2)

comment:12 Changed 6 years ago by Adrian Vasiliu

I submitted to Apple the following Bug report against iOS SDK: Apple BR 15351131 "UIWebView: in some conditions, events are not dispatched and entering text has no effect for input elements located in the area which is going to be covered by the virtual keyboard (regression in iOS 7)"

Note: See TracTickets for help on using tickets.