Ionic-framework: Scrolling stops working on IOS Safari

[MatejSpin]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

Current behavior:
I have a PWA running in a browser. It works fine in emulators and on Android (using Chrome).
Sometimes scrolling stops working on IOS (tested on iPhone SE, iPhone 6, iPad). It happens on normal ion-content or lists.
It seems to happen if I randomly tap around the app - especially the header. Scrolling then stops working for I'd say around 15-20 seconds and then returns. While scrolling isn't working all the buttons still work, so if it's a list with buttons and scrolling isn't working - click on one of the buttons still works.
I do not have any kind of special settings/functionality etc. regarding scrolling. Also, there's no events/functions attached to headers, so no events are triggered - at leat not by me.

Expected behavior:
Should scroll. :)

Steps to reproduce:
Open a scrollable content on IOS and tap around.

I, unfortunately, cannot provide the app here...

[kensodemann]

Hello! Thank you for opening an issue with us!

I see you cannot provide the specific app, but can you provide a sample application that displays the same behavior and share that via GitHub?

Thank you for using Ionic

[ursmeier-mercatus]

I just ran into the same issue.
I can reproduce it with every PWA on iOS Safari:

1) run http://pwa.ionic.io/ionic-conference-app/www/
2) Skip the slides
3) scroll up/down on schedule tab
4) on top or bottom of the list: touch the bottom safari browser-bar

e.g. touch the inactive forward arrow

5) app hangs

[kensodemann]

@ursmeier-mercatus - what version of iOS are you using? I just tried your steps on my iPhone 7 running iOS 11.1 several times but was unable to duplicate your results. The item scrolling continued to work for me.

[ursmeier-mercatus]

Sorry, forgot to mention: I'm using 11.0.3
I will upgrade to 11.1 and try again.

[ursmeier-mercatus]

Problem still exists with iOS 11.1. (iPhone 7s)
Scroll works fine , until I scroll down to the end of the list (let it bounce)
If I then touch the Safari browser bottom bar the app does not scroll any more.

Can also reproduce with the iOS Simulator, e.g. iPhone 8 with 11.1

[kensodemann]

I _finally_ got it to occur. It is _very_ random on my phone, only happening on every 5th or so hitting of the bottom and bouncing, and even then, only for a bit. If I take my finger away and then touch the screen again it starts scrolling again. Hmmm....

[ursmeier-mercatus]

In my case it hangs for 3-5 seconds, every time.

For my app I tried already <ion-conent no-bounce>.
I removed <ion-header>and <ion-footer> and reduced <ion-content>to just one <p> mit 30 lines.
No luck so far. I don't think therefore that the content matters.
I also tried build and build --prod, doesn't make a difference either.

Maybe this helps to find a solution.
Thanks.

[MatejSpin]

Yes, exactly the same happens on http://pwa.ionic.io/ionic-conference-app/www/... It's very random and happens if you tap on footer or header..
Maybe it's some kind of focusing issue...

[MatejSpin]

Just tested on Chrome on IOS 11.0.3 and it has the same issue. Seems to be more of an IOS issue then Safari...

[ursmeier-mercatus]

Chrome works OK in my environment (iOS 11.1 and 11.0.3).
Using the Simulator for iPhone, I can observe that iOS Safari consumes enormous amounts of CPU. I conclude, that the "hang" is effectively a non-responsive UI because of this CPU consumption.

[bparvizi]

Same issue. Our app started experiencing random scroll freeze on the list views. It happens 80-90% of the time if you start the swipe from the header. It seems to swallow up any further swipe gestures on the scrollable list causing a freeze. As mentioned above, the same happens if you scroll all the way down the list and then swipe up. Sometimes your finger overlaps with the footer area or content area outside the list which results in another scroll freeze. It happens more sporadically without header and footer gestures included. This is really troubling.

[MatejSpin]

Issue still there. I believe it's not a CPU issue, but focus issue.
On IPad when scrolling stops working we noticed the focus is on entire window/browser and you move the browser a bit. Also taps etc. works when scrolling isn't, so CPU isn't an issue.

[ursmeier-mercatus]

Tested iOS 11.1.1 and the freeze-problem still exists.

[MatejSpin]

Problem is quite apparent.. have many clients reporting this issue :(

[AntoineFemolant]

Hello !

Tests on iOS Chrome and Safari on iPad 4 10.3.3 et iPad Pro 11.1.2

We got the same issue with our iOS WebApp applications (Safari and Chrome)

• Scroll (to bottom or to top)
• Wait the bounce finished
• Scroll again in the same direction (to bottom or to top) or touch the header or the footer
• And directly then in the other direction
  => scroll blocked and we have to wait or to touch another part of the page (to affect focus ?). Also with the scroll of the Menu component.

Have you got this behaviour with mobile application?

I tried with the http://pwa.ionic.io/ionic-conference-app/www/ (thanks) and I have the same issue!
[EDIT] Change: http://ionic-team.github.io/ionic-conference-app/www/

I tried with https://codepen.io/rajkumar_mp/pen/xELmbE (ionic 1.10?) and there is no problem.

Thanks in advance.

Antoine Fémolant

---

cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.11.0
npm               : 3.10.10 
OS                : macOS Sierra
Xcode             : Xcode 8.2.1 Build version 8C1002

[bparvizi]

I was able to trace our issue to a piece of code that was setting the focus on a text input box that was being presented on a modal page. Once that call was removed the problem corrected itself so this definitely appears to be focus related. I would comb through your code to see where any explicit calls are being made that set focus on any elements.

[AntoineFemolant]

Hello,

Thank you for your message!

The issue doesn't happen only on pages with inputs (text & co).
I can't give you our code. But you can reproduce on page like http://ionic-team.github.io/ionic-conference-app/www/#/tabs/speakers/speakerList
Source on https://github.com/ionic-team/ionic-conference-app.

Can you give some examples of "piece of code that was setting the focus" please?

Regards,
Antoine F

[EvanMaFYH]

seems it is no matter with the input element
the problem only occurs on web app when using safari , when i build it to app , the problem goes away

[EvanMaFYH]

@kensodemann seems like the property -webkit-overflow-scrolling:touch leads to the issue ,but if I delete the property the scroll can not be smoothly

[AntoineFemolant]

Hello,
I do not know how but would it be possible to add labels please? 'v3', 'scroll', 'iOS', 'WebApp' such as on #11584
It's a such annoying issue, mainly for person who don't be familiar with iOS WebApp and scrolls.
TIA.
Antoine F

[AntoineFemolant]

Hi,

Similar post post with possibly a workaround: https://github.com/ionic-team/ionic/issues/10454 or https://forum.ionicframework.com/t/resolved-tab-pages-freeze-wehn-scrolling-vertically/65700

[KillerCodeMonkey]

any updates here?
i think this is a really urgent issue Oo

The workaround mentioned by @aamarcha is not really a workaround, because scrolling gets laggy if you have custom lists :(

[KillerCodeMonkey]

@kensodemann any updates or suggestions? I can not find anything if this issue is an iOS problem?
it would be nice to know, if this is and ionic issue (and i can do something to avoid it) or is it fixed in v4, or is it an ios/webview issue?

[KillerCodeMonkey]

tested with latest @ionic/core (0.1.4) and the problem exists also in the new stencil components

seems to be a combination of: -webkit-overflow-scrolling: touch, which is a general ios issue.
But somthing feels strange: if i start scrolling on the headerbar/toolbar the ionContent is not scrollable for a few seconds. Seems like the body/html scrolling is active for some seconds, if you change the
body { position: fixed; } to position: static; you can see the bounce effect of the whole page while trying to scroll.

EDIT: Seems like the good old -webkit-overflow-scrolling: 'touch'; hassle. if you want only a child container to scroll smooth on mobile devices you need this custom css-property -.-

[yauluntang]

If you do not allow the scroll to be at the edge, the problem will be resolved. Like when the scroll to the top, move to top + 1, but it is just workaround

[zaq962]

+1
I encountered the same problem when I switched to other pages by ion-tab. sometimes happen

just apears in ios safri browser

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.0.0-201710091726
Cordova Platforms  : android 6.3.0 ios 4.5.2
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v9.2.0
npm        : 5.6.0
OS         : macOS High Sierra
Xcode      : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[StephenAgui]

+1
I found the same issue，Scrolling stops working on IOS Safari

[judgewest2000]

https://github.com/judgewest2000/IonicPwa

This is a frustrating problem that has been around for YEARS. This is not new.

I have made a little work-around which you can see working if you have a look at the repo above, in particular this file...

https://github.com/judgewest2000/IonicPwa/blob/master/src/pages/scroll-content/scroll-content.ts

This has a quick demo on basically pushing the page a pixel up or down depending if you're at the start or the end.

It probably could/should be packaged better but hopefully will give you guys an idea.

Thanks

[matheusdavidson]

The problem seems to be with no-bounce, i had this bug in pages where a banner image would take 2-4 seconds to load(download time), changing page height. Removing no-bounce tag from ion-content solved.

[cmeredith]

I'm also having this issue and am not using no-bounce.

[qiuxiaoguang]

I'm also having this issue and have no idea to work it out .
it has a very substantial influence for user experience.

asking for help .

thanks

[KillerCodeMonkey]

Added a custom (and ugly) directive and added this to my ion-contents.
it triggers scrolling 1px up or down if you on top or bottom of the scrollview.

fixed it for me.

import { Directive } from '@angular/core'
import { Content, Platform, ScrollEvent } from 'ionic-angular'

@Directive({
  selector: 'ion-content[scroll-fix]'
})
export class ScrollFixDirective {
  constructor(private content: Content, private platform: Platform) {}

  ngAfterViewInit() {
    if (this.platform.is('mobileweb') && this.platform.is('ios')) {
      const scrollElement = this.content.getScrollElement()
      scrollElement.scrollTo(0, 1)

      this.content.ionScrollEnd.subscribe((evt: ScrollEvent) => {
        if ((this.content.contentHeight + 1) < scrollElement.scrollHeight) {

          if (scrollElement.scrollTop === 0) {
            scrollElement.scrollTo(0, 1)
          } else if ((scrollElement.scrollTop + this.content.contentHeight) === scrollElement.scrollHeight) {
            scrollElement.scrollTo(0, (scrollElement.scrollTop - 1))
          }
        }
      })
    }
  }
}

[judgewest2000]

@KillerCodeMonkey ,

That code looks stolen from my solution posted on the 23rd April.
Though using it on a directive does make sense. I have another version which performs this task but does not require you to update each and every page which I'll get uploaded at some point.

[qiuxiaoguang]

@judgewest2000 @KillerCodeMonkey this solution did not work well in my code, use this solution I got a high frequency jitter on top or bottom . and the issue still exist in iphones

[KillerCodeMonkey]

I Do Not want to Call IT stolen 😉. I only wanted to Post it again, because
it solves all of our problems with lagging or stucked scrolling. As a
programmer i am the last who stole Code... But a posted solution on a
public Repo of a MIT license project...

James West [e-mail] schrieb am Mi., 11. Juli 2018, 00:09:

@KillerCodeMonkey https://github.com/KillerCodeMonkey ,

That code looks stolen from my solution posted on the 23rd April.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/13343#issuecomment-403981866,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYAqcdg0pJ9yHoBYrR5cvEBVFpyenks5uFSYLgaJpZM4QTSZ7
.

[judgewest2000]

@qiuxiaoguang,

I think I know your problem. Is it on a screen where the content does not go beyond the length of the phone / iPad?

Can you try adding a bunch of nonesense content (like lorem ipsum) on the end of your page and see if it clears it up?

There's probably a requirement to have content padding if the page is too small.

Please let us know how you get on.

[zuo305]

yep. Same issue. Every page with scroll has this issue.

[zuo305]

And I found if I commented one line it will be fine.
that line is "build/main.css" , so there must something is not good in main.css for the iOS scroll.

[himgodfreyho]

By opening the web app on my iPhone and looking at the Web Inspector on a Mac, I discover that when the scroll stops working, it appears that I was scrolling the body, instead of the content. I recorded the screen of it. Hope this can help in finding the real problem and solution of it. https://drive.google.com/open?id=1PDRjfeW0jo3irOKqDD07f8OSRfllYwhn Starting from 00:07, I was using the "start selecting element" and selecting the body.

[cperezabo]

This is happening to me as well. We are doing something really wrong, or help me understand why it is not fixed. It is not just makeup, it degrades user experience.

[cperezabo]

I've been investigating and I've found (tell me if I'm wrong) it is out of the scope of Ionic, it's a Safari issue in iOS, and it's related on how Safari handles over scrolling and scroll chaining. overscroll-behavior is not supported by Safari yet. And if it would, I don't know if it would fix what happens when you scroll to end (or begining) and stop, if you try to keep scrolling, it will start scrolling the parent (scroll chaining), but if you could disabled that (overscroll-behavior) it still wouldn't fire the bouncing effect as we would expect, so it would give the impression of being stucked.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/521