cordova-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Juan Miguel (JIRA)" <>
Subject [jira] [Created] (CB-13387) ios11 scroll whitespace after click
Date Wed, 04 Oct 2017 08:31:00 GMT
Juan Miguel created CB-13387:

             Summary: ios11 scroll whitespace after click
                 Key: CB-13387
             Project: Apache Cordova
          Issue Type: Bug
          Components: cordova-ios
    Affects Versions: cordova-ios 4.5.0, cordova-ios@4.3.1, cordova-ios@4.4.0, cordova-ios@4.5.1
         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.
            Reporter: Juan Miguel
            Assignee: Suraj Pindoria

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. 

h2. Steps to reproduce
# Create a new project 
cordova create ios11_error com.test Test
# 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" />
# Replace www/index.html with the attached here [^index.html]
# Create ios platform
cordova platform add ios
# 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)
# 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.

This message was sent by Atlassian JIRA

To unsubscribe, e-mail:
For additional commands, e-mail:

View raw message