Leak from parent `overflow: hidden` with rounded border in Chrome

Question

The trimmed rounded child hidden hidden child child is still persistent and active in Chrome:

The same behavior in IE can be cured by adding the z-index property to the parent. No cure has yet been found for Chrome.

 #container { width: 200px; height: 200px; border-radius: 50%; background-color: orange; position: fixed; overflow: hidden; /*z-index: 1;*/ } #element { width: 100px; height: 100px; background-color: blue; position: absolute; top: 150px; left: 100px; cursor: pointer; } 

 <div id="container"> <div id="element"></div> </div> 

http://jsfiddle.net/a09q6cw2/

Answer 1

For versions of chrome that support -webkit-clip-path , you can trim child objects at the same boundaries as the parent, and prevent the cursor from changing outside the parent:

 #container { width: 200px; height: 200px; border-radius: 50%; background-color: orange; position: fixed; overflow: hidden; z-index: 1; } #element { width: 100px; height: 100px; background-color: blue; position: absolute; top: 150px; left: 100px; -webkit-clip-path: circle(100px at 0px -50px); cursor: pointer; } 

 <div id="container"> <div id="element"></div> </div> 

Answer 2

Please check that this may be useful for you ..

CSS

 .cricle { position: relative; width: 200px; height: 200px; background-color: #ccc; border-radius: 100%; overflow:hidden; } .box { position: absolute; width: 400px; height: 500px; background-color: red; left: 50%; top: 100px; /*this value same with first value of clip-path top value*/ cursor:pointer; -webkit-clip-path: circle(100px at 0px 0px); } 

HTML

 <div class="cricle"> <div class="box"></div> </div> 

Answer 3

Its basic HTML rendering for parent and child. You just specified overflow:hidden for the parent, so that part of the child that is outside the parent border has been trimmed. But not where you hid the child div on the right, since you expect it to be under the parent div?

If you can change the parent and child divs, see how html will look.

 #container { width: 200px; height: 200px; border-radius: 50%; background-color: orange; position: fixed; overflow: hidden; /*z-index: 1;*/ } #element { width: 100px; height: 100px; background-color: blue; position: absolute; top: 150px; left: 100px; cursor: pointer; } 

 <div id="element"> <div id="container"> </div> </div> 

If you want to hide the child div, I think you need to specify display:none for it.

Answer 4

if you want to support, perhaps clipPath might help:

 #rect { cursor: pointer; } 

 <svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="myClip"> <circle cx="100" cy="100" r="100"/> </clipPath> </defs> <rect x="0" y="0" width="200" height="200" fill="orange" clip-path="url(#myClip)"/> <rect id="rect" x="100" y="150" width="100" height="100" fill="blue" clip-path="url(#myClip)"/> </svg>