Overflow hidden with border radius not working in chrome
Not sure if this is a chrome specific bug or something, but when I navigate to the child of the parent with the overflow hidden with the border radius, the overflow is visible and the transition is in place.
var wrapper = document.getElementsByClassName('wrapper')[0],
img = document.getElementsByTagName('img')[0];
/*
Click anywhere in the bordered area to toggle img
*/
wrapper.addEventListener('click', function() {
if (!img.className) {
img.className = 'hidden';
} else {
img.className = '';
}
}, false);
.wrapper {
overflow: hidden;
border-radius: 60px;
border: 1px solid salmon;
}
img {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 1s ease;
}
.hidden {
opacity: 0;
}
<div class="wrapper">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg">
</div>
Here's a script demonstrating the issue https://jsfiddle.net/827vuyqb/2/
Any solutions, workarounds for this?
+2
source to share
1 answer
Just put a wrapper element and give it z-index
:
var wrapper = document.getElementsByClassName('wrapper')[0],
img = document.getElementsByTagName('img')[0];
/*
Click anywhere in the bordered area to toggle img
*/
wrapper.addEventListener('click', function() {
if (!img.className) {
img.className = 'hidden';
} else {
img.className = '';
}
}, false);
.wrapper {
overflow: hidden;
border-radius: 60px;
border: 1px solid salmon;
/*Position and z-index*/
position: relative;
z-index: 1;
}
img {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 1s ease;
}
.hidden {
opacity: 0;
}
<div class="wrapper">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg">
</div>
+6
source to share