[CB-13387] ios11 scroll whitespace after click

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Not A Bug
• Affects Version/s: cordova-ios@4.4.0, cordova-ios@4.3.1, cordova-ios@4.5.1, cordova-ios 4.5.0
• Component/s: cordova-ios
• Labels: ios11 statusbar xcode9

Environment

I'm facing this issue testing with xCode 9 in iOS 11 (simulator and device), every device model, using cordova-ios from 3.8.0 to 4.5.1. I have this issue in many projects, but I create a new one without any plugins just for testing it, and it reproduces in a simple environment.

From what I have tested, i think it only happens when using new meta viewport-fit=cover at html file.

• Assignee: Suraj Pindoria
• Reporter: Juan Miguel
• Created: 04/Oct/17 08:30
• Updated: 04/Oct/17 20:20
• Resolved: 04/Oct/17 20:20

Description

When you have dynamic content in your app, it shows correctly at first moment after insert/show it, but when some click event is dispatched (and an event listener is attached) the scroll element goes down leaving an empty zone, where the elements were previously. If no event listener is attached, this issue doesn't happen. If the content is not added dynamically, the scroll starts in wrong position.

I have been testing lot of things, and the problem is that after that brokener-click, the scrolls remain in scrollTop position -44, which should be impossible (and if programatically you try to go to this position, it goes to 0 position)

I have made an image showing the issue, sorry for it's appearance, but I think it shows clearly what happens:

As the image shows, it leaves a white space equal to the 'safe-zone' of the statusbar, in iPhone X are 44px, other iPhones 20px.

Steps to reproduce

1. Create a new project

   cordova create ios11_error com.test Test
   

2. Configure config.xml for disabling overscoll (I attach my configured config.xml, but you just need to add the next code under iOS platform):

   <preference name="DisallowOverscroll" value="true" />
   

3. Replace www/index.html with the attached here index.html
4. Create ios platform

   cordova platform add ios
   

5. Add launch images for the device you want to use (if you are going to test in iPhone X, it is not included yet by default with cordova; with other models it is not neccesary)
6. Launch application in your device or simulator.

When launched, everything looks fine and in right place, you can scroll and everything keep where it should. But if you make a tap where there is a click listener, the scroll element 'goes down' and you can scroll to this 'overzone', and the top scrolls goes to negative position and keeps there (-44px in iPhone X, -20px in other devices; which is the statusbar size).

It doesn't matter if you make a click in an element and doesn't make anything in that listener (blue header), or even if that listener only has prevents calls (red square in left down corner), scroll breaks. If you tap in green square, right down corner, doing a hide/show put the view again in right position.

If a click is made in a zone without a listener, anything happens and everything keeps in right place.