1. 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

Discussion in 'Off Topic' started by Umit, Jan 15, 2011.

  1. Umit

    Umit Active Member

    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?
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Which OS and version of Chrome are you using?

    It's fine in Win 7 and Chrome 8 for me.
    Umit likes this.
  3. Umit

    Umit Active Member

    Mac - Chrome 8.0.552.237
  4. Umit

    Umit Active Member

    is it only me ?
  5. Mike

    Mike XenForo Developer Staff Member

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

    Kier XenForo Developer Staff Member

    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 likes this.
  7. Umit

    Umit Active Member

    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..
  8. Boothby

    Boothby Active Member

    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;
    Bildschirmfoto 2011-01-15 um 18.44.11.png
    From left to right:

    - Firefox (for reference)
    - Safari (not affected)
    - Chrome (affected)
    - Webkit (affected)
    Dean likes this.
  9. Umit

    Umit Active Member

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

    Umit Active Member

    Whoa! fixed on google chrome 12!

Share This Page