CSS3 border-radius circle hover problem -webkit browsers

[stvheld]

Hi all,
I’m having an issue with -webkit browsers (Safari, Chrome) when I use a hover state for a border-radius circle. The hover state still fires as if the element were still a ‘square’. In other browsers the hover state fires only when the mouse cursor is over the circle. Any ideas on how to solve this issue?

Here’s my testing site for CSS3 circles: http://www.stevenheld.com/HoverClickTriggerCircle/index.html
My current homepage uses image maps to get around this issue, but I’d like to use an updated code: http://www.StevenHeld.com

Thanks for looking and for any advice/help you can offer!

[Paulie_D]

Not something you can do with CSS…multiple stacked/positioned image/divs with the JQuery solution suggests itself to me…but that is beyond my expertise.

[joshuanhibbert]

That is just current browser implementation, not much you can do about it!

[nick.spiel]

The following applied to the parent element with the border radius applied to kick webkit back into line for me:

-webkit-mask-image: -webkit-radial-gradient(white, black);

Another option is to wrap the element in two border radius parents.

Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.

[Author]

Posts