CSS formatted links fail… sometimes (!)

[Piano]

I’m tearing my hair out trying to figure out the cause of this.

I have a bunch of links that sometimes fail to click – once every few dozen clicks or so. I’m using CSS3 to format them. When I remove the CSS3 formatting code for the links, they work every time.

What I find incomprehensible is why the links sometimes work and sometimes don’t.

Another mysterious issue: if a link has failed, and I click it again on the same exact spot, it fails again. But if I move the cursor just a little bit in any direction, the link works again!

Sidebar links are the ones I’m having trouble with.

I’d appreciate advice from someone knowledgeable!

[TheDoc]

If what you’re describing is only happening if you click near the top of the links, then I believe what you’re struggling with is solved in this video: https://css-tricks.com/video-screencasts/123-if-it-moves-when-you-click-make-something-stick/

[Piano]

TheDoc – thank you, this is a step in the right direction!

With my links, it happens seemingly at random, and not only near the top of the link, but literally anywhere. However, there’s something in common with the issue described in that video: when a link fails, it generates the mousedown event but does not generate the click.

In the active state these links move down by 1px – this must be what’s causing the issue. I’m going to try the solution described in that video.

[Piano]

Yes, this definitely solved it. Thank you!

[Author]

Posts