I was trying to create a page with sticky footer, when I found it. If you type your url several times in searchbar so that chrome would prefetch it when you've typed it but didn't hit go (enter), then the page is loaded with bigger height for some reason. (Only on Android, but it happend on all my devices).
At first I thought that maybe my styles were wrong, but the I've checked it against typical examples such as:
- https://getbootstrap.com/docs/5.0/examples/sticky-footer/
- https://getbootstrap.com/docs/4.0/examples/sticky-footer/
- And both versions from here https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
To reproduce it just open new tab, write full url and wait some time before hitting go so it will prefetch. May not work for the first time, then just close opened tad, open new one and once again type the full url, wait and after hitting go you will not see a footer in the end of the page untill (for some reason!!) tapping in any place of it.
While figuring out I also found out that https://viewportsizer.com/ gives for my Pixel 6 height of 1112px it loaded with prefetch (as described above) and waited for some time to display numbers, while actual Pixel 6 height (without prefetch) is 790px and it could be seen on that same site.
(Screenshots are with prefetch load and after touching the screen)
So my questions is..
Is it a bug? Is it a known issue? And most of all are there any workarounds? Can my site detect being loaded with wrong\prefetched height and somehow reload the page afterwards?