Anchors / section links creating a blue outline

Any Page section link I have on my site is revealing an outline around the linked section when I click the link, but it only seems to be happening in Safari - it hasn’t aways done this, and I can not find what is causing this issue?

https://www.centralvineyard.co.uk/new-here
Any help greatly received?

2 Likes

I think I’ve solve the issue with a new line of CSS
.section:focus {outline: none;}

But at a loss as to why this suddenly happened?

2 Likes

@stevegee78 Hi can you help me with that? I’ve the same issue, I’m not a developer so I’really appreciate if you can tell me where to put that line of CSS you said.
Thank you very much

@stevegee78 I have the same issue. Could you provide some more details if possible? Also, besides the blue outlines, all section links on my webflow sites have wird jumping behaviour at the moment. Really awkward, didnt change anything and it is not a browser issue.

Thanks!

The following custom code:

<style>
*:focus { outline: none; }
</style>
7 Likes

The above kinda, sorta solved it. Its weird, the blue outline is gone, but still flickers on every now and again. I can’t figure this out. Was also was wondering the same thing, why it just showed up one day. Maybe webflow made a switch internally since they’re really pushing accessibility and this is an accessibility option. I hate it. I care about accessibility, every single accessibility option on my company’s website is checked off, every single image has really descriptive alt text, its just this option completely breaks the all dark aesthetics of my website, not to mention slows down mobile dramatically.

When I asked webflow support they said it was a browser level accessibility feature, and nothing to do with them? I don’t believe that as I’m not seeing this universally across other websites, plus I have another site I admin for friends and that site hasn’t been republished for a few weeks and is not seeing this happen! Like you I’ve been hot on alt tags and have all Headers in order and really like the audit feature - but this blue box thing is horrible, hope that line of css worked for you, Webflow support confirmed it as the right solution

Where exactly does this go?

Not sure if this is the right place but I put the code in: “(Page Name) Settings / Custom Code / Inside tag” and it fixed the blue highlight.

Could anyone confirm if this is the right place to pout it?

2 Likes

Hi, stephane, just replying late because maybe it would be helpful for others, and yes is correct!

4 Likes

You are a good human. I tried @Steph4ne solution and it worked for me but I forgot to comment here to confirm for others. My point is there needs to be more @Jordana_Naftali’s :clap: haha

1 Like

Hi there!

I tried to find a solution that works on all my pages (at once). Does anyone know of a way to get rid of the blue border without having to paste this custom code into every page?

To get this to work on all pages, go to your Project Settings, Custom Code and add it to the header.

3 Likes

No-code solution: So on the section that creates an outline, you set an outline 1px, and color of the outline like the color of the background, so you basically camouflage it. Try it and let me know.

This just happened on my site. Thankful to find this solution!! Would be great to know why the blue outlines appeared all of a sudden.

:v: The solution is very simple. Without custom code. 1) Choose a section. 2) Outline:none

2 Likes