Weird pseudo element issue in Safari

[Josh Johnson]

Okay so on this website: http://www.friaragescannerappeal.org.uk/

On Chrome and Firefox (and even IE), the navigation cue (the arrow beneath the active link) works fine – but for some reason on Safari it does not work at all. Any ideas why this is happening? Weird it doesn’t happen in Chrome but not Safari as both use webkit.

[Paulie_D]

Chrome and Safari both use flavors of webkit so there will be differences.

Which version of Safari is glitchy and in what OS?

[Josh Johnson]

I have tested Safari 6.0.4 and 6.0.5 on Mac and both have replicated the issue. I have done browser testing on all other browsers on both Windows and Mac and haven’t noticed the issue.

[Josh Johnson]

http://i.imgur.com/gXnrGWY.png – This is the issue I am seeing

[Paulie_D]

Ah…can’t test Safari 6 as it’s Mac only.

[Josh Johnson]

Also happening on Safari 5.0 and 5.1 on Windows. Can’t believe IE8 can handle it but not Safari – maybe it is a bug

[Paulie_D]

Ah…can’t test in S5 until I get on my work PC

[Kitty Giraudel]

You might want to try this:

• Add position: relative to your anchor elements (a)
• Turn position: relative into position: absolute for your pseudo-elements (a:before)
• Change bottom: .65em with bottom: .25em (or anything that suits your need)

Without even testing it in Safari, I’d say it should fix it. Hope I’m correct. ;)

Edit: markup isn’t great since the change. Lists don’t have bullets/numbers anymore. :(

[Author]

Posts