Webflow sync, pageviews & more.
NEW
Answers

What could be causing the issue where Safari shows an outline around linked sections on my Webflow site?

If Safari is displaying an outline around linked sections on your Webflow site, it is likely due to the default CSS outline styles applied to anchor links in the browser. Here are a few possible causes and solutions to resolve this issue:

1. Safari's default focus styles: Safari, like other browsers, applies default focus styles to elements when they are navigated using the keyboard. This includes adding an outline around the focused element. To remove this outline, you can use CSS to reset the outline style for the anchor links.

```css
a:focus {
outline: none;
}
```

This will remove the outline when an anchor link is in focus but keep in mind that it may impact accessibility. Make sure to provide an alternative focus style or indicator for users who rely on keyboard navigation.

2. Custom CSS or third-party scripts: If you have custom CSS or third-party scripts that modify the default styles of anchor links, they might be conflicting with Safari's default styles. Check your custom code for any specific styles targeting anchor links and modify them accordingly. Additionally, disable any third-party scripts temporarily to see if they are causing the issue.

3. Webflow's internal styles: Webflow's pre-defined styles and interactions might also be contributing to the issue. If you're using a Webflow template or pre-built elements, there could be specific styles applied to the anchor links that are causing the outline to appear. You can inspect the affected elements in the Webflow Designer and modify the styles to remove the outline.

To do this, select the element with the anchor link, go to the Styles panel, and locate any properties related to outline styles. Adjust or remove these styles to eliminate the outline.

It's worth mentioning that while removing the outline might improve the visual appearance, it's important to ensure that users can still navigate through your site using assistive technology. Adding alternative visual cues or focus styles is highly recommended to maintain accessibility standards.

By implementing these solutions, you should be able to resolve the issue with Safari displaying an outline around linked sections on your Webflow site.

Rate this answer

Other Webflow Questions