Not sure whether it is chrome specific bug or what, but when I am transitioning child element on a parent that has overflow hidden with border radius, the overflow is visible, while 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 fiddle demonstrating the issue https://jsfiddle.net/827vuyqb/2/
Any solutions, workarounds for this?
