I’ve got several section links in both the nav bar and images and text on right column of header. Most of them are working properly.
But when I or my partner view on 2 laptops using different browsers, and on 2 iphones all of the “Brand” and “Social” links don’t go to the anchor. They appear in the middle of the previous section.
I uploaded the a pic of the place “brand” scrolls to.
BUT when you click a second time, it goes to the right anchor point.
Someone else tested for me, but they could not replicate. I’m wondering if it is a mac issue???
I hate how unprofessional this makes me look, but I don’t know how to fix it.
Hi.
I should add, it would be helpful to know if you are seeing this issue. Or if you are not having any problem with where the link scroll to. Either way, i’d love to know what OS, and browser version you are using. I’m trying to determine how large a problem is. And if I’m the only one this is happening to…
Thanks so much!
This issue generally occurs due to the way browsers calculate height on page load based on the content on the page.
There are quite a few images that are set to lazy load on your page. This allows for images to be loaded on scroll instead of all at once when the page is loaded.
In this situation, the browser is not accounting for the height of those images and therefore the calculation that is done for page scrolling is a bit off when the link is first clicked.
In order to fix this issue, I recommend setting the images on your page to “Eager: loads with page” to see if the browser better calculates the height of the page on load.
Another option is to add an attribute to the body element on the page that will remove smooth scrolling. Add the attribute with the name: "data-scroll-time " and set the value to "0 ". See a screenshot of this setup here:
You could try setting the min-width of the Navbar component to 4.6rem instead of 4.5erm to ensure there is a small amount of overlap, it looks as though the section padding is rounding differently on different sections (71px vs 72px).
