Uploaded image for project: 'Apache Cordova'
  1. Apache Cordova
  2. CB-13387

ios11 scroll whitespace after click



    • Bug
    • Status: Closed
    • Major
    • Resolution: Not A Bug
    • cordova-ios@4.4.0, cordova-ios@4.3.1, cordova-ios@4.5.1, cordova-ios 4.5.0
    • None
    • cordova-ios


      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.


        1. ios11_error.png
          225 kB
          Juan Miguel
        2. index.html
          3 kB
          Juan Miguel
        3. config.xml
          1 kB
          Juan Miguel



            surajpindoria Suraj Pindoria
            mellinas314 Juan Miguel
            0 Vote for this issue
            1 Start watching this issue