border-radius bug

border-radius and overflow:hidden not working in Chrome/WebKit browsers.

by Yuping Zuo

HTML

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

CSS

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

JavaScript

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