SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Css3 rounded corner in chrome come out looking funny.

    I am developing a site with free images for artist, develper, whatever.
    the ronded corner effects comes out fine in firefox.
    but not as nice in chrome.

    http://www.iwantanimage.com/buildings/buildings01.html

    Is there a good suggestion on how to fix this please?

    and this of course it the code that I used.
    Code:
    #mainPageTable2 img{
    width: 288px;
    height: 216px;
    border: #000000 medium solid;
    -webkit-transition: background 3s;
    -moz-border-radius-topleft: 7px;
    -webkit-border-top-left-radius: 7px;
     border-top-left-radius: 7px;
     
    -moz-border-radius-topright: 7px;
    -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;
    
    -moz-border-radius-bottomright: 30px;
    -webkit-border-bottom-right-radius: 30px;
    border-bottom-right-radius: 30px;
    
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    border-bottom-left-radius: 7px;
    }

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    It's a known bug in webkit.

    It's not pretty, but here's a fix I ended up going with:

    Code:
    #thing img{
        border: 1px solid black;
        -webkit-box-shadow: 0px 0px 0px 1px black; /* fix for border-radius on img not clipping corners in chrome */
    }
    
    
    @media screen and (-webkit-min-device-pixel-ratio:0) { /* target Safari and Chrome */    
        #thing img{       
            border:none; /* fix for border-radius on img not clipping corners in chrome */   
        } 
    }
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Force, will go try it out.
    hope the bug will get fix sometimes in the future.
    D

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    From what I understand, it's been a long-standing bug.

    There's a bug report from 2010 about it: http://code.google.com/p/chromium/is...etail?id=62363
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yeah...kinda thought that might be the case.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It's odd. Safari ( I tested it on 5.x) which uses -webkit doesnt show the bug BUT old versions of FF ( I had 3.6 on that same machine) does.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It works great on my ff, even w/the fix suggested by Force it looks crappy on chrome.
    Google how could you?!?

    Quote Originally Posted by dresden_phoenix View Post
    It's odd. Safari ( I tested it on 5.x) which uses -webkit doesnt show the bug BUT old versions of FF ( I had 3.6 on that same machine) does.

  8. #8
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    It works great on my ff, even w/the fix suggested by Force it looks crappy on chrome.
    Google how could you?!?
    You will likely need to make the appropriate changes to the code in order to match your corner and border width/color.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Force, but i did.
    I was using more than one pix. didn't think it worked that hot but will take one more look.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •