Reproduce:
- View this page in Safari on iPadOS.
- Notice the red overlay. These are two
html/body:afterelements, bothposition: fixed, see below. They should not move in any of the next steps. - Scroll up (on the element containing the text). You will notice the overscroll effect.
- Scroll all the way down, wait for the overscroll to settle, then scroll down again. You will notice the overscroll effect.
- Scroll down, causing the overscroll effect, then scroll up before the effect settles. Everything works as expected.
- Now install the page as a home screen web app.
- Scroll up. You will notice no overscroll effect except on the red overlay.
- Scroll all the way down, notice the overscroll effect on the text content (not the red overlay).
- Wait for the overscroll to settle, then scroll down again. The text doesn't overscroll but the red overlay does.
- Scroll down, then scroll up before the effect settles. Scrolling is completely blocked until the red overlay's overscroll settles.
Note: I expect the same results on an iPhone running iOS Safari but don't have a device available to test it.
Explainer
The html and body elements have a :after element with a red border (html) and a red background (body). Neither responds to scrolling the div.content when viewed in Safari, but they do respond to overscroll when in standalone mode with viewport-fit=cover.
viewport-fit=cover breaks html, body { position: fixed; } and -webkit-fill-available
The only way to get the correct overscroll behavior (where the body never overscrolls and does not block scrolling on the scrolling element) is to set html { position: fixed; top/left/right/bottom: 0; }. However, that causes a gap at the bottom of the page (exactly the size of the extra height we get because we have viewport-fit=cover) even though we have top and bottom set to zero. The top of the element is behind the statusbar (expected) but bottom is not at the bottom.
Replacing bottom: 0; with height: 100vh;, height: 100%; or height: -webkit-fill-available; don't work, either. They all result in a gap at the bottom of the window.
Actually, height: -webkit-fill-available; never accounts for the extra space when viewport-fit=cover. I have to detect iOS standalone mode and switch back to 100vh.
Afaik, there is no combination that does not cause scrolling divs to lock up on overscroll *and* have the html/body fill the available height at the same time.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam ligula, iaculis sit amet viverra quis, volutpat at sapien. Aliquam erat volutpat. Nunc varius fermentum dolor non dapibus. Praesent accumsan feugiat laoreet. Maecenas in tellus quis lacus commodo scelerisque. Nunc id sollicitudin orci, non pretium dui. Curabitur dictum tellus tortor, et pretium mauris congue malesuada. Praesent ac elit fermentum, gravida ipsum at, posuere tellus. Fusce scelerisque turpis ut elit blandit placerat. Praesent tempus sed lacus tristique malesuada. Nam gravida pharetra erat sed ullamcorper.
Duis ac magna id augue euismod dapibus et eu purus. Nulla facilisi. Morbi viverra tincidunt magna eget eleifend. Quisque sed risus ut sapien congue commodo. Aliquam ac nunc vitae eros dictum varius quis tincidunt urna. Mauris ultricies tincidunt viverra. Aenean scelerisque enim rhoncus mauris mattis placerat. Nullam consequat dignissim arcu, vitae ullamcorper mi posuere ac. Nulla cursus finibus ante sed elementum. Morbi maximus dignissim lobortis. Vestibulum facilisis lacus quis odio pulvinar, sed placerat nunc facilisis. Nullam ultrices lectus non pretium facilisis.
Donec viverra et odio non ultrices. Phasellus leo mauris, pharetra ac dolor ac, gravida dapibus nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In et lorem pharetra enim maximus cursus. Vestibulum convallis metus eget velit sodales, non vehicula ligula aliquet. Sed dictum pulvinar enim pellentesque sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et accumsan augue. Aenean sapien turpis, mollis non dui nec, laoreet sodales enim. Curabitur et metus id tortor viverra aliquet vitae sit amet neque. Sed rhoncus pretium velit et luctus. Pellentesque venenatis enim eu ultricies molestie. Donec venenatis molestie est interdum aliquam.
Vestibulum ut sodales metus. Maecenas quis mi et arcu posuere molestie in sit amet lorem. Quisque ullamcorper, neque sed iaculis cursus, elit tortor mattis sapien, eget placerat metus elit ac arcu. Maecenas auctor porttitor turpis ut viverra. Morbi quis erat et lorem porta ornare eget ut sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non dictum nisi. Cras quis augue efficitur, tincidunt est id, ultrices diam.
Praesent vehicula metus in eleifend egestas. Aenean aliquam leo ut est hendrerit, id eleifend lectus interdum. Suspendisse condimentum volutpat massa at mattis. Ut tristique non nisl eget eleifend. Curabitur commodo tincidunt est vel ultrices. Vivamus lectus ante, fermentum sed augue ut, pretium dictum leo. Aenean porttitor in lacus et imperdiet. Nullam consectetur congue enim non eleifend. Nulla facilisis augue maximus pulvinar luctus. Pellentesque sollicitudin luctus ligula sit amet dictum. Vestibulum ornare, ex eget vehicula dictum, velit lorem faucibus quam, sit amet accumsan justo erat euismod enim. Proin eget dui est. Proin faucibus quis urna in molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nulla feugiat elementum magna. Maecenas sit amet elementum diam, a dignissim tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius libero et interdum blandit. Integer maximus ornare risus quis tincidunt. Nunc est metus, posuere sit amet sapien luctus, molestie fringilla purus. Aliquam euismod interdum urna, at blandit risus egestas eu. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla porta est nec diam tristique maximus. Pellentesque nec quam ipsum.
Donec finibus elit sit amet libero maximus, ac euismod lectus pellentesque. Donec nec auctor purus. Integer ullamcorper eros nec metus tincidunt ultricies. Aenean consectetur pharetra turpis eget elementum. Pellentesque libero mauris, lobortis sit amet augue vitae, imperdiet ultrices lacus. Vestibulum ac vestibulum est. Nullam sed tincidunt odio. Integer elementum accumsan feugiat. Donec quis vehicula quam. Morbi eros libero, ultricies eu nibh ut, sagittis convallis nisl. Pellentesque a orci nisl. Pellentesque est nunc, mattis non orci quis, molestie convallis tellus. Vestibulum nec gravida sem, sit amet laoreet nunc.
Sed ante metus, laoreet ut interdum at, blandit non odio. Etiam eleifend nisi non augue malesuada venenatis. Vivamus vitae massa volutpat dui ullamcorper tincidunt et id justo. Aenean tempus odio ex, ut scelerisque arcu sagittis ultrices. Phasellus a feugiat mauris. Morbi faucibus et felis non pretium. Ut efficitur augue ac faucibus consequat. Cras at lobortis elit. Phasellus tortor magna, aliquet sit amet lacinia in, dignissim et quam. In pulvinar aliquam ex at aliquam. Quisque dictum quam vitae nulla interdum tristique.
Nulla facilisi. Maecenas ac tellus pretium, ornare odio in, ultrices lacus. Maecenas dictum rhoncus velit ac pulvinar. Duis ullamcorper, quam nec feugiat feugiat, sem nunc lacinia sapien, vel faucibus orci sem at nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi risus velit, rutrum et sem eu, accumsan semper massa. Mauris mattis egestas est. Sed enim ante, tristique non dapibus vel, vehicula in erat. Donec ut elementum elit. Praesent rutrum enim at libero lobortis porttitor. Vivamus fringilla ultricies turpis, id vehicula risus tempor in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin pretium sed tortor non bibendum. Cras ultrices risus sit amet facilisis tristique.
Vestibulum ac massa in libero semper bibendum. Vivamus egestas sollicitudin sapien, egestas commodo leo dictum a. Maecenas lobortis non sem et rhoncus. Vivamus cursus augue eget elit lacinia, ut commodo neque vulputate. Donec rhoncus malesuada sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo gravida tincidunt. Phasellus porta, diam aliquam lacinia ultrices, dolor est finibus risus, sed dictum metus eros quis odio. Phasellus eget orci accumsan magna viverra pretium id vel mauris. Morbi eget sem semper, convallis magna non, convallis augue. Suspendisse luctus orci vel lectus tincidunt, eget consequat ex dignissim. Donec facilisis aliquet justo vitae ultrices. Curabitur sagittis imperdiet nisi ac sagittis.
Integer id nibh luctus, feugiat nibh sed, tristique est. Nam eu nisl vulputate, aliquet orci sit amet, luctus neque. Praesent ac erat dolor. Vivamus quis laoreet mauris. Morbi dictum, felis vitae egestas tempor, lorem sem rutrum tellus, id ullamcorper felis libero at ante. Donec vitae neque urna. Donec efficitur pellentesque diam, at suscipit magna aliquam at. Vestibulum eleifend ornare nunc eget venenatis. Donec mi turpis, tristique quis tristique nec, convallis ac diam.
Curabitur eget nisl auctor, rhoncus magna a, eleifend lectus. Vestibulum porta lorem ac hendrerit bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porta gravida mollis. Quisque ac enim nunc. Integer hendrerit tempor faucibus. Nunc accumsan finibus turpis, id convallis lorem volutpat non. Nam nec metus diam. Mauris facilisis turpis vel elit imperdiet scelerisque sed sit amet ipsum. Suspendisse pulvinar diam mauris, at tincidunt tortor lobortis vitae. Aenean gravida libero porta purus semper maximus. Proin elementum consectetur efficitur. In sit amet imperdiet tellus. Morbi fringilla eget augue laoreet hendrerit. Nullam nec pretium ex, vel accumsan ligula. Proin enim nunc, rhoncus non elit sed, volutpat ultrices odio.
Aliquam eu vulputate diam, a molestie dolor. Duis sollicitudin velit sed sodales viverra. Donec vitae tempor massa. Pellentesque ullamcorper sollicitudin nunc et posuere. Fusce rhoncus dolor vitae lectus condimentum, nec dignissim leo facilisis. Pellentesque a dolor vel tellus congue laoreet. Maecenas bibendum ultrices consectetur. Phasellus iaculis turpis eu condimentum condimentum. Aenean a leo at turpis ullamcorper rhoncus sit amet sit amet ipsum. Nullam aliquam augue id ornare ultrices.
Pellentesque dictum, purus in porta congue, odio lectus mollis felis, vitae commodo tellus diam id elit. Aliquam sapien ex, fermentum nec ex at, vestibulum malesuada leo. Vivamus ullamcorper sollicitudin sapien quis egestas. Duis eu sodales nisi. Nulla ut vulputate odio. Nulla at elit luctus, lacinia mi eget, cursus massa. Mauris dictum non risus at auctor. Duis ut imperdiet elit, scelerisque tincidunt magna.
Praesent hendrerit libero id hendrerit vehicula. Ut nec blandit tortor, quis condimentum mauris. Sed vitae sollicitudin ex. Duis id turpis vel diam varius vulputate. Praesent finibus dignissim neque. Nullam nec luctus nisi. Maecenas nec feugiat justo, eu imperdiet sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean commodo tristique fringilla. Etiam fermentum ex vehicula nisl aliquam, feugiat eleifend diam aliquam. Sed sed pulvinar ex, et cursus leo.
Nunc tristique elit quis maximus egestas. Aliquam erat volutpat. Nulla sed molestie neque. Nulla fringilla varius sapien, ac vehicula tellus iaculis eget. Mauris eget augue auctor, lacinia mauris congue, scelerisque arcu. Sed et ipsum bibendum, pellentesque urna eleifend, accumsan ante. In mauris metus, vestibulum non accumsan quis, gravida eu magna. Quisque vulputate tincidunt luctus. Nam quis cursus nibh, ut aliquam tellus.
Donec odio tortor, pharetra a augue a, fermentum suscipit tellus. Aliquam volutpat libero blandit ultricies scelerisque. Duis massa tellus, viverra vel congue eget, pharetra at lectus. Duis at sem eget mi tempor egestas et non mi. Mauris fermentum molestie tortor, eu pulvinar nisl. Etiam molestie risus mollis, fringilla dolor id, ornare leo. Quisque efficitur, arcu eget vestibulum finibus, leo nisi laoreet lacus, vel lacinia dolor ante non lectus. Sed nec dui dui. Pellentesque id augue pellentesque metus rhoncus cursus. Proin bibendum eros vel risus venenatis eleifend. Duis feugiat id lectus id convallis. Donec diam urna, laoreet ac ligula nec, tristique pharetra nibh. Nam id massa euismod, hendrerit dolor eu, tincidunt nisl. Proin ante velit, ultricies a venenatis vel, suscipit non tellus.