溢出：隐藏在Chrome中无法使用border-radius

Question

我正在尝试使用悬停显示的叠加层制作圆形图像。但是，悬停（并点击）的“命中框”不正确，如下面的代码段所示。

此问题似乎只发生在Chrome中（不确定Safari）。 我在互联网上找到some fixes，但都没有。 JSFiddle for testing

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

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

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

编辑在Firefox 57中测试过，没有问题。 IE和Edge已经过测试，因此它是特定于Chrome / webkit的问题。

Answer 1

HTML中的块由位置（x，y）和大小（宽度，高度）定义，因此浏览器可以简化页面上的内容并与之交互。因此，即使使用border-radius，mask-image等，你的.circle div仍然是一个正在进行绘制的正方形。

为避免这种情况，您不能使用像:hover这样的动态选择器，因为它将使用div的形状，这是一个正方形。在悬停块时需要使用javascript检测鼠标位置，并执行动画（使用窦和余弦计算）。

您可以使用以下内容获取鼠标位置：

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

我还发现this topic正在谈论在页面上获取元素的位置。

Answer 2

您只能更改.circle类这些属性：

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