dispersione di `overflow: genitore hidden` con bordo arrotondato in Chrome

Question

ritagliata da parte nascosta del bambino genitore arrotondata persiste e attiva in Chrome:

Lo stesso comportamento in IE potrebbe essere curata con l'aggiunta di z-index proprietà a padre. Ancora non trovato cura per 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

Per le versioni di Chrome che supportano -webkit-clip-path, è possibile agganciare il bambino agli stessi confini come il genitore e prevenire il cambiamento del cursore al di fuori del genitore:

#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

sua una base HTML rendering per genitori e figli. Hai appena dato overflow:hidden per il genitore, quindi la parte del bambino che è al di fuori del confine del genitore è stata tagliata fuori. Ma in nessuna dove hai nascosto il div figlio giusto? Quindi come ti aspetti che sia sotto div genitore?

Se è possibile scambiare il div genitore e figlio, vedere come sarà l'html.

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

Se si desidera nascondere la div bambino Credo che bisogna specificare display:none per esso.

Answer 3

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> 

Answer 4

se si desidera supportare cioè forse clipPath può aiutare:

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