Chrome rounded-corners rendering issue

[Umit]

Sorry to put this here, i know this had been discussed (thats why i didnt post this as bug report) but couldnt find it with search.

as you can see in the picture, rounded corners look broken in my chrome (Mac), checked with safari and no issue at all... Whats this bug?

 

[Paul B]

Which OS and version of Chrome are you using?

It's fine in Win 7 and Chrome 8 for me.

 

[Umit]

Mac - Chrome 8.0.552.237

 

[Umit]

is it only me ?

 

[Mike]

I don't have any issues on Windows - I think it may be a Mac Chrome issue, as I know Kier has seen it.

 

[Kier]

I have indeed, and nothing I've tried has got rid of it.

Interestingly, it was happening during development too, but then disappeared for a while, and is now back. I suspect it may be a Chrome/Mac bug, but if anyone has any ideas...

 

[Umit]

I have indeed, and nothing I've tried has got rid of it.

Interestingly, it was happening during development too, but then disappeared for a while, and is now back. I suspect it may be a Chrome/Mac bug, but if anyone has any ideas...

worked a lot today but couldnt find any solution, but it is a really interesting chrome bug...

if i try to smooth the broken corners then it is getting better in chrome but making it worse in safari (without change, safari is fine):
(.XenPreviewTooltip -> border-color: {xen:helper rgba, @previewTooltip.border-color, 0.500} {xen:helper rgba, @previewTooltip.border-color, 0.510}

if i certainly remove the broken corners then it is getting way too transparent in all browsers - and broken corner in safari:
(.XenPreviewTooltip -> border-color: {xen:helper rgba, @previewTooltip.border-color, 0.201} {xen:helper rgba, @previewTooltip.border-color, 0.204}

try to change .XenPreviewTooltip with what i gave above and check on safari/chrome/ff, it is really frustrating..

 

[Boothby]

There is a bug in the Webkit rendering engine, that was also reported here. The funny thing about this is, that some browsers are affected and some are not.
I tested it a little bit and made a screenshot.

#test {
    border: 25px solid rgba(3, 42, 70, 0.5);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    width: 200px;
    height: 200px;
}

From left to right:

- Firefox (for reference)
- Safari (not affected)
- Chrome (affected)
- Webkit (affected)

 

[Umit]

maybe 2 different divs with padding is the only solution.
couldnt do anything with the webkit-border-image

 

[Umit]

Whoa! fixed on google chrome 12!