オーバーフロー：Chromeのborder-radiusで非表示になっています

Question

私は、ホバー上に表示されるオーバーレイを使用して円の形の画像を作成しようとしています。ただし、以下のスニペットに示すように、ホバー（およびクリック）の「ヒットボックス」は間違っています。

この問題はChromeでのみ発生するようです（Safariについてはわからない）。 私はsomefixesがインターネット上に見つかりましたが、どれも働いていませんでした。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>

編集：は、Firefox 57でテストは、問題なく動作します。 IEとEdgeはすでにテストされているので、Chrome/Webkit固有の問題です。

Answer 1

HTMLのブロックは、位置（x、y）とサイズ（幅、高さ）で定義された四角形であるため、ブラウザーはページ上の内容を簡単に把握できます。だから境界線半径、マスク画像などでさえ...あなたの.circle divは、まだ描画されている正方形です。それはdiv要素の形状を使用しますので、それを避けるために

は、あなたが:hoverのような動的なセレクタを使用することはできません、それは正方形です。ブロックをホバリングしてアニメーションを実行するときには、JavaScriptを使用してマウスの位置を検出する必要があります（sinusとcosinusの計算を使用）。

あなたはこのようなもので、マウスの位置を取得することができます。

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

私は、ページ上の要素の位置を得ることについて話しthis topicを見つけました。

Answer 2

あなたはこれらのプロパティのみ、●クラスを変更することができます。

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