Anchor links creating borders around linked sections in Safari

EDIT: I thought it was only on iOS, but the issue is with Safari on Macs too.

I’m having an issue in Safari with borders appearing on anchor-linked sections after they’re visited. Basically, when an anchor link is clicked and the page scrolls to the linked section, that section has a border around it that shouldn’t be there (the border is blue on an iPhone and light grey on a Mac. If you click anywhere within the section, the border disappears.

The two buttons at the top of the page are both anchor links that can illustrate this.

Here is my site Read-Only: International Scalp Show website

Hey hey!

What you see is a feature of the browser, it highlights areas of a page that are in focus and provides feedback to users on where they are currently navigating. You may find it annoying, but there are good reasons for it. Some rely on it being shown, for example when only using the keyboard.

You could override this behavior, but it’s rarely a good idea and you potentially make the site unusable for certain people!

You can read about it here:

1 Like

Ahhh. Thanks for pointing this out! My client is the one that hates it, so hopefully the accessibility argument will work in this case.

You can alter it to your brand colors, but be sure to follow accessibility guides in terms of contrast etc - but best to leave as is

I’m going to try to leave it as is. But I think the one issue that really bothers my client is that, for some reason, the border on the TICKETS section is curved, as opposed to the other ones, which are just a straight line across the border of the section. Looking at the border styles for that TICKETS section, the radius is 0 for every state, including focused (technically, there’s no border for any state). I can’t figure out where to adjust that border to make it look like the others after the anchor link is clicked.

use combo class and remove nth child

1 Like

Good catch! I didn’t realize I was using the same class for the section and the div.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.