Leakage out of `overflow:hidden` parent with rounded border in Chrome

Question

Cropped by rounded parent child's hidden part still persists and active in Chrome:

The same behavior in IE could be cured by adding z-index property to parent. Still found no cure 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 clip the child at the same boundaries as the parent and prevent the cursor change 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 this may be works 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>