html - 溢出 :hidden not working with border-radius in Chrome

Question

我正在尝试制作一个圆形图像，并在悬停时显示叠加层。然而，悬停(和点击)的“hitbox”是不正确的，如下面的代码片段所示。

这个问题似乎只发生在 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 中的 block 是由位置 (x, y) 和大小(宽度、高度)定义的正方形，因此浏览器可以简化页面上的内容并与之交互。因此，即使有 border-radius、mask-image 等......你的 .circle div 仍然是一个正方形，里面有绘制。

为避免这种情况，您不能使用像 :hover 这样的动态选择器，因为它会使用 div 的形状，即正方形。您需要使用 javascript 来检测鼠标悬停在 block 上时的位置，并以此执行动画(使用正弦和余弦计算)。

你可以通过这样的方式获取鼠标位置:

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

我还找到了this topic谈论获取元素在页面上的位置。