在Chrome中漏出`overflow:hidden` parent并带有圆角边框

Question

由圆形父子项隐藏的部分裁剪仍然在Chrome中保持并处于活动状态:

IE中的相同行为可以通过向z-index父级添加属性来解决.仍然找不到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

对于支持的 chrome 版本-webkit-clip-path，您可以在与父级相同的边界处剪辑子级，并防止光标在父级之外更改：

#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>