iOS Sometimes scrolling moves the whole page

framework7io / framework7

Full featured HTML framework for building iOS & Android apps

MIT License

18.06k stars 3.23k forks source link

Framework7 version: 7.0.5
Svelte version: 3.48.0
Platform and Target: iOS 15.5 Safari Browser
Live Link or JSFiddle/CodeSandbox: https://app.paquet.ro

Describe the bug

Scrolling the page sometimes moves the whole page, moving the header and revealing background color. I've tested numerous fixes but none work. I noticed this applies to all projects created with Framework7 CLI

To Reproduce

Steps to reproduce the behavior:

Create project with Framework7 CLI
Try playing around with scrolling on the page. Sometimes it happens randomly. You can replicate this issue every time by scrolling on the header bar

Expected behavior

It should only scroll the page content

Actual Behavior

Sometimes scroll the whole page at once including the header bar.

I had that issue for month and I've looked for a solution without finding anything.

Today I got rid of it !

The solution is there at the end of the page : WebKit solution

html{
  overscroll-behavior: none;
}
body {
    overflow-y: scroll;
}

html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, height=device-height">
</head>

I didn't noticed any side effects with that solution, no more screen moving on scrolling. It's like when the app is installed with capacitor, but with a PWA :)

framework7io / framework7