Situations
I’ve a somewhat easy web site format consisting of a sticky header, most important content material and a sticky footer.
The sticky header and footer have mounted heights and the principle content material takes up no matter house is left.
If the principle content material requires more room than obtainable it should trigger the html node to overflow and show a scrollbar.
Expectations
After I scroll down I anticipate the browser to hit the underside of the web page and cease scrolling. The footer needs to be the final factor proven on the web page, immediately bordering the browser’s personal controls.
I additionally anticipate browsers to deal with this with out me having to use extra CSS or JavaScript that forces the browser to behave in a sure approach. Conduct similar to overscrolling is anticipated and even required.
These expectations are met on MacOS (Chrome, Safari, Firefox) and on iOS (Safari, Firefox).
Conduct in Safari (iOS)
Drawback
It doesn’t work in Chrome for iOS (model 111.0.5563.72 in my case). As soon as one scrolls to the underside of the web page the browser will scroll previous the web page and present an empty house.
This house could have the background shade of the html node and is roughly the identical top because the viewport.
I’ve already tried making use of a number of totally different potential options primarily based on CSS and JavaScript however to no avail.
Conduct in Chrome (iOS)
Demo
I’ve supplied a StackBlitz repository that can be utilized to breed this conduct.
To check it for your self open this hyperlink in Chrome for iOS: https://js-jetsg3.stackblitz.io
Observe this hyperlink to view the supply code: https://stackblitz.com/edit/js-jetsg3
Whereas testing my manufacturing app and the demo, I’ve observed that very hardly ever it really does behave the best way I might anticipate it to, just for it to return to its regular conduct after one or two refreshes.
Questions
What will be completed to stop Chrome from scrolling previous the underside of the web page?
If nothing will be completed about this explicit conduct, what will be completed to maintain the footer on the very backside of the web page, when Chrome scrolls previous the underside of the display screen?
Request
I might extremely recognize forks of the StackBlitz I’ve supplied exhibiting a working resolution.
