search

locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
455 stars 71 forks source link

Mobile chrome iOS problem of scrolling to the very bottom of a long page, clicking to a new page that is shorter, and being already scrolled to the bottom. #164

Open adamatronix opened 6 months ago

adamatronix commented 6 months ago

Hi,

Been working on a site using your boilerplate, and noticed an edge case which occurs when you scroll to the very bottom of a page on Chrome iOS, and click to the next page already scrolled down. The new page must be shorter than the one you are coming from.

I mean to the very bottom, a few pixels above it will work fine. But this is very noticeable for a user clicking the footer links.

I'm still troubleshooting, but I can assume the bottom browser UI may be interfering with something.

I tried going with manual scrollRestoration and always setting the scroll to 0, however that still has the issue.

adamatronix commented 6 months ago

Upon further observation it's when the chrome browser ui is hidden and the next page is shorter. You scroll a bit up to make the UI appear and it is fine.

devenini commented 6 months ago

Hey @adamatronix! Can you share a CodeSandbox or a link where the problem occurs? Thanks!

adamatronix commented 6 months ago

Hi,

Unfortunately my e-commerce site is still in development, but I was able to recreate the issue on some of your e-commerce work. Please see the following video capture:

https://github.com/locomotivemtl/locomotive-boilerplate/assets/16537300/ec78ad8d-4347-484d-91c2-f59621abb9af

Note that Login is a shorter page than Home, and that it will work fine when I scroll up a bit to reveal the browser ui.

iOS 17.1.2 Chrome Version 120.0.6099.119

devenini commented 6 months ago

@adamatronix I can't reproduce the issue, and I have both the iOS and Chrome versions that you have. Could it be a user preference preventing window.scrollTo from firing?

git-ekuo commented 6 months ago

I'm able to reproduce this issue as well on chrome + iOS. It seems a little intermittent. The issue occurs quite consistently when I click on a link while doing the scrolling down motion.