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

cropped rounded parent child's hidden part still persists , active in chrome:

the same behavior in ie cured adding z-index property parent. still found no cure 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/

for versions of chrome support -webkit-clip-path, can clip child @ same boundaries parent , prevent cursor change outside 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 @ 0px -50px);    cursor: pointer;  }

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