Why do the "Brand" and "Social" links in Webflow not go to the correct anchor point on certain browsers and devices?

When “Brand” or “Social” links in Webflow don’t scroll to the correct anchor location, it’s often due to inconsistent behavior in how browsers and devices handle anchor scrolling with fixed navigation layouts or dynamic content height changes.

1. Fixed Header Overlap

• Fixed navbars can cover the anchor target when scrolling.
• By default, anchor links scroll the target element to the top of the viewport, which may be hidden behind a fixed header.
• This is more noticeable on smaller screens or browsers with different default scroll behaviors.

2. Scroll Offset Not Applied Correctly

• Webflow does not automatically add scroll offset for in-page anchor links.
• On some devices, especially mobile, different rendering engines (e.g., Safari vs. Chrome) handle in-page anchor positions slightly differently.
• This causes the scroll position to vary, particularly when dynamic content loads after initial scroll.

3. Dynamic Content or Fonts Pushing Layout

• Webfonts and lazy-loaded images can shift layout elements after the anchor scroll triggers.
• If the content shifts after the scroll completes, the target anchor can end up above or below the intended view.
• This issue is more prevalent on slower devices or mobile networks.

4. Incorrect or Missing IDs

• Double-check that each section has the correct and unique ID assigned.
• If two elements share the same ID or the ID is missing entirely, the browser may scroll to the wrong place or ignore the ID.

5. Safari and iOS-Specific Scroll Bugs

• Safari (especially on iOS) has known issues where it offsets anchors slightly or refuses to scroll accurately to elements within a scrollable container.
• These quirks can cause inconsistent behavior across platforms.

6. Custom Code Conflicts

• If you’ve added custom JavaScript or smooth-scroll libraries, they might override default scroll behavior or interfere with Webflow’s built-in scrolling.
• Conflicting animations or listeners can also delay or incorrectly calculate the final scroll location.

7. Interactions That Affect Element Visibility

• If the anchor section is hidden or revealed via Webflow interactions (e.g., display: none to block), browsers may fail to scroll properly since the target isn’t “visible” at the moment of navigation.

Summary

Anchor links like “Brand” and “Social” may not scroll to the right location on some browsers or devices due to fixed headers, content shifting after load, browser quirks (especially in Safari/iOS), missing IDs, or conflicting custom code. To fix this, consider adjusting scroll offset with custom code, ensuring unique IDs, and minimizing layout shifts during load.