• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Chrome rounded-corners rendering issue

Umit

Active member
#1
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?
 

Mike

XenForo developer
Staff member
#5
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

XenForo Developer
Staff member
#6
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

Active member
#7
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

Active member
#8
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.

Code:
#test {
    border: 25px solid rgba(3, 42, 70, 0.5);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    width: 200px;
    height: 200px;
}
Bildschirmfoto 2011-01-15 um 18.44.11.png
From left to right:

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