I’m about ready to finalize a website, and this final glitch is causing me grief. All I need are some simple … links. On my desktop (PC/Apple/Firefox/Brave/Safari), it works as expected. On my old iPhone 7 with Brave and Safari, it also works as expected. BUT, on my wife’s Samsung Galaxy S10 with Chrome it’s finicky. If a link is relatively close to the viewport, it scrolls to the target div just fine. But anything past a few screens full, it stops before the target is even visible. If I click the link again, it completes the scroll, landing where it should. Once the target div has been reached, the browser is able to scroll to it again from anywhere on the page, but before that initial click, it stops part way. Am I going crazy? (not unlikely…)
I searched for a solution the best I could and have tried several variants:
- Using <a name="#target">
- Using <a name="target">
- Using <div id="target">
- Using the $('document, html').scrollTo() jQuery function
- Messing with $(window).scrollTo()
- Tried removing any css relative positioning from the design
I even tried a total hack, which thankfully (and sadly) didn’t work. I made a little animation chain where after the initial scrollTo() animation completes, a delay() (both short and long to test) kicks in, followed by another scrollTo(), hoping to simulate what I have to do as a human user to get it to complete the scroll. Weird stuff happened 🙂 It started to scroll, quickly got stuck and jittered in place for the duration of the animation, then suddenly jumped to the final (incomplete) destination. Again, all of the solutions worked fine on everything I tested, minus the Samsung Galaxy in Chrome (whether in Desktop or Mobile mode).
I’m just a music prof trying to setup a site for my wife, so any pointers, ideas, or even just a pat on the back with “it’s an Android/Chrome thing” would be fantastic. Feel free to visit the site and view the source (it’s by no means complete/pristine. I still have to do a lot of little things to tidy things up, un-hardcode, etc. i.e., show me some mercy 😉
Thanks in advance!