Unexpected scroll issue with id anchor
Hey! I have an anchor link on one of my websites that should navigate to
#contact, which is a section with the id of #contact.
When you click on the "Contact" call to action button in the navbar, on the / route, it doesn't scroll all the way down to the contact section, but rather halfway between the section up above it.
On the /services route, it works as expected.
I thought it might have to do with something in the section above it, but I've moved that section near the top of the page and the link navigates as it should...
Another unexpected issue is that if you click it again (twice), it then navigates to the correct section.
This issue only happens on mobile and laptop. On desktop it works (or should) as expected.
I honestly have no clue what's causing this. I've tried taking different things apart and changing them but no dice. Here's the live link: https://15mmedia.com/20 Replies
Are your images lazy loaded? I noticed if I just load up the link with the #contact anchor in the url, it loads in the right place for a split second and then everything jumps up as some images come into place
Ya they are but is that a known bug? I noticed that too but didn't think much of it because I thought there would be no way that causes it 😂
Let me try to take out the lazy loading
Haha I mean I honestly have never ran into that personally, but I've also never had so many lazy loaded images 😂. It's necessary for the amount of images you have, I just am not too sure how to get around it without some research
Wow that's actually it
😂
Dammnit I've been here for like an hour and a half
Well at least I can research that now
Thanks so much again you always help out 🙂 👍
Haha no problem. After a quick search, I've noticed multiple people have ran into the same issue and the solution is super hacky
They basically animate the scroll so the images can show up, then calculate the new location and programatically click it again. They do all of this in JS. Horrible solution, but at least there's one out there I guess 🤷♂️
https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/
Haven't read it but this may help! Also hacky from first glance though
James Steinbach
CSS-Tricks
Preventing Content Reflow From Lazy-Loaded Images | CSS-Tricks
You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport.
I think I actually got it to work?
Let me test it some more
All I had to do was give each image a width/height attribute
I guess that way the browser can interpret some base dimensions for CLS
Oh I didn't even notice, yes that's extremly important to limit CLS haha
Didn't realize they did not have them
Yup that works I believe, not the greatest solution because it's not dynamic (eg images on desktop can be something like 600x600 but on mobile its 300x300) but it works and I don't think it'll cause performance issues
The astro Image component does that for me automatically but I guess it does it during page load on the client rather than SSR?
So I guess there's a split second where the page doesn't have the dimensions and that messes with it? I dunno
If they're external images, you do have to actually tell Astro the height and width. If they're internal images, it should add it automatically at build...
Hmm. Either way, glad it's working!
Thanks for the links and suggestions. I'll let you know if I can get a better fix going
No worries. Also make sure that it works with cache disabled for those that first load the page
Hi Vince, your contact section wraps your text-container and your form container. Since they stack on top of each other the page scroll to the top of the contact section which is where the text-container also starts. Just my 2cents🙂
Thanks dirkie! That's intentional. I think it's because of the content reflow
So I thought giving them widths/heights would work, and thought it did work but it didn't. Ended up just saying screw it and made the images non-lazy loaded and still scoring 94/100 on performance
Lol did you try throttling? Or was that using your natural wifi speed
I thought Lighthouse automatically throttled on mobile?
😳
They do as long as you tested the mobile version haha
oh yea okay PHEW
cause I already told my client it was fixed 😂
Yea definitely not happy with that solution but it was either that (and take seemingly no performance hit other than a couple points) or try some hacky JS solution
Even in that css tricks article it says all you need to do is add width/height but that still didn't work
Really weird
God at least you're getting super fast scores still!
Ya I'm really happy about that 😅