What could be causing the issue where Safari shows an outline around linked sections on my Webflow site?
- Safari shows a focus ring on internal anchor link targets due to accessibility defaults.
- To remove it, style the target element’s “Focused” state in Webflow with outline: none, or apply a custom class with CSS; ensure accessibility by optionally using a subtle custom outline instead.
Linked sections may show an unwanted outline in Safari due to default focus ring styling applied to anchor links. This typically appears when a user clicks a link that navigates to an internal section via a hash (e.g., #about), causing Safari to highlight it for accessibility.
1. Understand What’s Triggering the Outline
- Safari applies a default focus ring to elements when they are targeted via hash navigation (e.g., clicking a nav link that scrolls to
#section-id). - This is an accessibility feature that ensures users see where keyboard or internal link focus is.
- The ring usually appears as a blue or grey outline.
2. Identify the Elements Affected
- Look for links pointing to internal anchors (e.g.,
href="#section-id"). - The outline usually appears on the target section or element that has the corresponding
id.
3. Apply Custom Styling to Remove the Outline
To remove the unwanted outline without affecting accessibility:
- Select the section or element that gets the outline in Webflow.
- Go to the Style panel.
- Use the "States" dropdown and choose "Focused".
- Under Focused state, set Outline: None.
Or apply globally using a class:
- Give the target section a custom class (e.g.,
anchor-target). - Add custom CSS in Page Settings > Custom Code > Inside Head:
- Use:
<style>.anchor-target:focus {outline: none;}</style>
This removes the focus ring only for elements with that class, maintaining focus for other interactive elements.
4. Consider Accessibility Best Practices
- Removing outlines can hinder accessibility for keyboard users.
- A better approach might be to replace the outline with a subtle custom style that’s less intrusive but still visible.
- Example:
<style>.anchor-target:focus {outline: 2px dashed #ccc;}</style>
Summary
Safari’s focus ring appears when using in-page anchor links and can cause outlines around linked sections. To resolve this, target affected elements in Webflow's Focused state and set outline to none, or use a custom class with CSS for more control. Always balance visual cleanup with accessibility.