Content overflows div radius in Chrome

Question

I have a site with strange layout (by my client) and I have developed it fine.

The problem is Chrome (version 22) doesn't work, but in Firefox (version 16) and IE 9 it works.

The problem is in the colRight, there are two divs that don't respect the radius, the content overflows and goes over the colCenter.

How can I fix that?

JSFIDDLE

FIREFOX:

enter image description here

CHROME enter image description here

HTML:

     <div class="colCenter" id="two"></div>
     <div class="colRight" id="three">
         <div class="first_menu"></div>
         <div class="dati_societari"></div>
    </div>

CSS:

    .colCenter{
    position:absolute;
    top:0;
    left:18%;
    height: 100%;
    width: 72%;
    background: #ccc;
    border-left: 0px solid #333;
    border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
    /*border-radius: 0.2px 0px 0px 0.2px;*/
    z-index:100;
    overflow:hidden !important;
    box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
}

.colRight{
    position:absolute;
    top:0;
    right:0;
    background:#fff;
    height:100%;
    width:18%;  
    z-index:1000;
    border-left: 0px solid #333;
    /*border-radius: 70px 0px 0px 70px / 250px 0px 0px 250px;*/
    border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
    box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
    -moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
    overflow:hidden !important;
}






.first_menu{
    height:10%;
    width:100%;
    background:#714d8f; 
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}


.dati_societari{
    height:8%;
    width:100%;
    background:#9a9a9a; 
    position:absolute;
    bottom:50px;
    left:0;
    z-index:2;
    text-align:center;
}


.social{
    position:absolute;
    width:100%;
    bottom:5%;
    left:20%;   
}

.img_social{
    opacity:0.7;    

    transition-property: opacity; /*standard*/
    transition-duration: 0.4s;

    -webkit-transition-property: opacity; /*Safari e Chrome */
    -webkit-transition-duration: 0.4s;

    -o-transition-property: opacity;      /*Opera*/
    -o-transition-duration: 0.4s;

    -moz-transition-property: opacity;    /*Firefox*/
    -moz-transition-duration: 0.4s; 
}

This question should not rely on the status of external links to remain useful in the future. Please include your code within the question. See http://sscce.org/ — Sparky, Oct 24 '12 at 14:52
fiddle marks the third closing div tag as wrong, furthermore a minimised code to locate the problem would be nice — JaMaBing, Oct 24 '12 at 15:10
I agree. Stripping it down just to a single div with rounded corners and overflowing content should be enough to solve this. — Sparky, Oct 24 '12 at 15:12

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

This appears to be a Webkit bug...

CSS Border radius not trimming image on Webkit

Bug Reports...

https://bugs.webkit.org/show_bug.cgi?id=30475

http://code.google.com/p/chromium/issues/detail?id=82417

edited May 23 '17 at 12:27

Community

1
1

answered Oct 24 '12 at 15:18

Sparky

98,165
25
199
285

wrapper in my case is every colum? (colRight for example?) – Alessandro Minoccheri Oct 24 '12 at 15:22
can you make a jsfiddle but with column rounded like mine? because is that the problem – Alessandro Minoccheri Oct 24 '12 at 15:25
@AlessandroMinoccheri, my suggested bug fix does not work on your particular situation because your inner content also has `position: absolute`. It's a `webkit` bug and I'm updating my answer as such. – Sparky Oct 24 '12 at 15:42

Content overflows div radius in Chrome

1 Answers1