PWA scrolling issue on iOS - Ionic 4

Ionic Framework
1

Hi, I’m still facing the scroll issue on iOS which cause interface to freeze for few seconds and make user experience quite bad.

If I got it right it should be a scroll + focus issue. Does anyone have a workaround? It has not been solved for a couple of years now and I really need to release my PWA for both iOS and Android (which is working perfectly).

(To reproduce the issue you just need to build a PWA and deploy it. The issue is amplified when you use “Add to the homescreen” in Safari).

Cheers,
Niccolò

2

Any news on this? I’m facing exactly the same issue. The freezing (which can even be more amplified if you background-foreground the PWA) makes my app unusable on iOS devices. I’m on Ionic 5 with Angular 10…

3

I am working with the new version of Ionic and I have the same problem, the scroll is temporarily blocked but if there is any button or an interactive element, these components continue to work. I have the impression that the problem lies in the smooth effect that Ionic tries to simulate on iOS devices. When will you fix this bug?

4

Same issue here… PWA is not usable in iOS. Can we have a fix for this?

Im on latest @ionic/angular and Angular 11

I recorded the behavior while hovering with the inspector from the debug tools over the body tag, so something weird is happening here:

https://www.youtube.com/watch?v=R6KRUcsHw-g

As you can see, most of the time, I’m moving the body (blue transparent layer), but sometimes the scroll is working as expected.

This error only occurs on pwa, not in the browser.

Deleting the class “plt-pwa” from the html-tag, fixes the issue (not completely), but this is introducing optical flaws.

Screenshot 2021-05-22 161351
Screenshot 2021-05-22 1613511050×308 21 KB

Edit:
Okay, I found an issue on the webkit bug tracker that appears to be related: 214781 – Inconsistent scroll behavior when using overflow:hidden on body if added to home screen (webkit.org)

5

Built a hack that works for me. Tested and works on my iPhone 11 Pro. Feedback is highly appreciated!

Add this CSS-Snippet to a global CSS-File. I added this to my theme.scss-File. The Home-Screen App scrolling should behave as expected.

Snippet:

// iOS PWA scroll Fix
html.plt-ios.plt-pwa {
  height: 99.9vh !important;
}

So on iOS PWA, your screen is 0.1vh smaller. But a easy trade off for me, barely noticeable.