Überlauf: versteckt funktioniert nicht mit Border-Radius in Chrome

Question

Ich versuche, ein kreisförmiges Bild mit einem Overlay, das bei Hover zeigt. Die "Hitbox" des Schwebens (und Klickens) ist jedoch falsch, wie im folgenden Ausschnitt gezeigt.

Dieses Problem scheint nur in Chrome (nicht sicher über Safari) auftreten. Ich habe somefixes im Internet gefunden, aber keiner von ihnen hat funktioniert.JSFiddle for testing

$(document).ready(function() { 
 
\t $(".circle").click(function() { 
 
\t \t alert($(this).attr("id")); 
 
\t }); 
 
});

#canvas { 
 
\t width: 100%; 
 
\t padding-bottom: 75%; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t background-color: #eee; 
 
} 
 
.circle { 
 
\t position: absolute; 
 
\t width: 25%; 
 
\t padding-bottom: 25%; 
 
\t border-radius: 50%; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t overflow: hidden; 
 
\t cursor: pointer; 
 
\t /*https://stackoverflow.com/a/32987370/5532169*/ 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t /*https://stackoverflow.com/a/25206004/5532169*/ 
 
\t z-index: 1; 
 
\t /*https://stackoverflow.com/a/10296258/5532169*/ 
 
\t -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); 
 
\t /*https://stackoverflow.com/a/16878347/5532169*/ 
 
\t -webkit-mask-image: -webkit-radial-gradient(circle, white, black); 
 
} 
 
.mid { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: absolute; 
 
} 
 
.inner { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 
} 
 
.inner>* { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 
.hover { 
 
\t background-color: rgba(255, 255, 255, 0.6); 
 
\t opacity: 0; 
 
\t transition: opacity 0.5s; 
 
} 
 
.hover:hover { 
 
\t opacity: 100; 
 
\t transition: opacity 0.5s; 
 
} 
 
span { 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t width: 72%; 
 
\t text-align: center; 
 
\t font-family: monospace; 
 
\t font-size: 2em; 
 
\t font-weight: bold; 
 
\t color: #08f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvas"> 
 
\t <div id="div1" class="circle"> 
 
\t \t <div class="mid"> 
 
\t \t <div class="inner"> 
 
\t \t \t <img src="https://dummyimage.com/320x320/000/fff" alt=""> 
 
\t \t \t <div class="hover"> 
 
\t \t \t \t <span>Hello World!</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Edit: Getestet in Firefox 57, arbeitet ohne Problem. IE und Edge wurden bereits getestet, es handelt sich also um ein Chrome-/Webkit-spezifisches Problem.

Answer 1

Die Blöcke in HTML sind quadratisch definiert durch Position (x, y) und Größe (Breite, Höhe), so dass der Browser eine vereinfachte Vorstellung davon haben kann, was auf der Seite ist und mit ihm interagiert. Also auch mit Border-Radius, Mask-Image, etc ... Ihr .circle Div ist immer noch ein Quadrat mit kommen gezeichnet.

Um das zu vermeiden, können Sie nicht einen dynamischen Selektor wie :hover verwenden, weil es die Form des div verwenden wird, und das ist ein Quadrat. Sie müssen Javascript verwenden, um die Mausposition zu erkennen, wenn Sie den Block bewegen und damit eine Animation ausführen (mit Sinus- und Cosinusberechnung).

Sie können die Mausposition mit so etwas wie dieses:

<div class="circle" onmouseover="hoverFunction(e)"></div> 
<script> 
function hoverFunction(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
} 
</script> 

Ich fand auch this topic reden Elemente Position auf der Seite zu bekommen.

Answer 2

Sie können nur & cir Klasse ändern sich diese Eigenschaften:

width: 26%; 
padding-bottom: 26%; 
border-radius: 50%; 
-moz-border-radius: 50%; 
-webkit-border-radius: 50%;