Overflow hidden break chrome

Question

Can someone tell me how can I fix this on Chrome? On firefox it works perfectly.

div{position: relative; width:200px; height:200px; overflow:hidden;background-color:#fc0;}; div img{opacity:0.2; transition:all 0.5s}

The code is just a sample of how i am using it. The animation works perfectly on firefox, the image gets circled all the time, but on chrome, when the animation is happening the image is can be seen oout of the circle.

Any help?

Imagem http://studio3pixels.com/img.png

So those corners aren't supposed to be seen? Looks like you've encountered this bug: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera?lq=1 — Pavlo, Sep 18 '13 at 16:53
i've look the example and edited the jsfiddle, take a look in what is happening http://jsfiddle.net/ff5Nk/746/ — Anderson Sousa, Sep 18 '13 at 18:28
Got a "solution" for this, but in case of using a border around a wrapper div, it still breaks. Use -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); on wrapper div. — Anderson Sousa, Sep 18 '13 at 18:35

score 0 · Accepted Answer · answered Jan 22 '14 at 17:44

here is a workaround with background images, Hope this solution is good for you: http://jsfiddle.net/yucp2/

<style>
#wrapper
{
     width: 300px; height: 300px;
     border-radius: 300px;
     overflow: hidden;
     border:solid 10px #000;
     background-color: #f30;
     z-index:3;
}
#wrapper span
{
     width: 300px;
     height: 300px;
     top:0;
     background-color: #cde;
     transition: all 0.5s;
     z-index:1;
     overflow:hidden;
     background-image:url(http://www.paixaoeamor.com/arquivos/fotos/A777C.jpg);
     background-repeat:no-repeat;
     background-size:100% 100%;
     display:inline-block;
     background-position:center center;
 }
 #wrapper:hover > span
 {
     opacity:.5;
     background-size:120% 120%;
 }
 </style>
 <div id="wrapper">
    <span></span>
 </div>

Overflow hidden break chrome

1 Answers1