CSS3 bug(?) in Google Chrome

[davidboiss]

Hi,

On the page listed below, i try to keep the rounded corners on the box, but when the animation starts in chrome, the rounded corner disapear, I would like to know if anyone else has got that problem before?

http://www.mamanfournier.acolyte.ws/menu-broken

Thanks.

[TheDoc]

Working fine for me in Chrome.

[Ampitere]

Working fine in Chrome as well.

[davidboiss]

Ok, seems there is a bug in webkit, I partially solved the issue by embedding rounded corners into background images.

[davidboiss]

I can set it back to how it was with css3 rounded corners so you can see the result, give me a sec…

[davidboiss]

http://www.mamanfournier.acolyte.ws/menu-broken -> CSS3, broken on hover with chrome.

http://www.mamanfournier.acolyte.ws/menu -> No CSS3, my solution was to add rounded corner to background images.

[TheDoc]

Aaahhh, I see I see. Hmmmm… off the top of my head I can’t think of anything to fix that.

[davidboiss]

Thanks for taking a look! but i think that replacing the images with corners into them is a viable solution for now!

[clokey2k]

It looks like a z-index / positioning issue, I don’t know what the behaviour should be within the CSS3 spec. If you apply a border to the ‘#menu-nav2’ you can see the line it should trace, but your absolutely positioned items are ‘above’ it… Sucks;

I had an idea:

#menu-nav2:after {

content: "";

position: absolute;

top: -4px; //to shift the border out

left: -4px; //may need to be tweaked

right: -4px;

bottom: -4px;

border: 8px solid white;

border-radius: 16px;

z-index: 1000; //counteract parent z-index

}

But it breaks the entire functionality of that menu :(
I’m stumped.

[Author]

Posts