Forum Replies Created
Thanks for wanting to look into this further.
I get the problem on your site as well as mine using Safari or Chrome.
Problem: The hover state fires when the mouse is over the ‘square’ of where the css3 circle would be if border radius wasn’t applied to create the circle.
On firefox and IE9 the hover state fires when the mouse is over the circle area only. This is the behavior I am looking for. BUT on Safari and Chrome, the hover state fires within the ‘square’
This problem can be seen more clearly when the css3 circle is much larger. Try 400px or more.
I’ve created a css3 large circle with hover state on a testing page here: http://www.StevenHeld.com/test It uses your code.
After testing out your code, I still get the same problem on Safari and Chrome on the Mac and even on the PC. You said you were able to get Safari and Chrome to behave correctly on your end with hover states over circles but I couldn’t reproduce that. I checked to make sure the browsers were up to date.
It seems to be an issue with only those browsers. I’m glad to see that the latest IE actually behaves correctly but I was really hoping to have Safari behave correctly. Since, many other designers in my field are using macs and that browser.
At this time, I think I’ll just wait to update my code and continue to use an image map until css3 border radius has consistent results in all major browsers.
Unless you have any other ideas I could try?
I will certainly pull out my code and try yours. I’m sure the current code on my site has a lot of unnecessary elements from when I was trying to get the hover state to work.
I’ll let you know how that goes. I’m at work now so it’ll be later tonight.
Thanks for looking into this. You rock.
Mac OSx 10.6.8
Firefox: 6.0 (works great)
Safari: 5.1.1 (square hover state)
Chrome: 15.0.874.120 (square hover state)
Thanks for your help. I’m a designer and not much of a developer. Although, I know more than most designers.
I did read your article -that’s how I thought you’d be a good one to ask. But it looks like your circles do the same ‘square’ state on hover. I was just wondering if I could solve that since my design doesn’t suite a ‘square’ hover state very well.
I added a testing circle surrounded by a dotted line to emphasize my issue, here – http://www.StevenHeld.com/test