Overflow hidden with border radius not working in chrome
<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
  overflow: hidden;
  border-radius: 60px;
  border: 1px solid salmon;
}
img {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 1s ease;
}
.hidden {
  opacity: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Here's a fiddle demonstrating the issue <a href="https://jsfiddle.net/827vuyqb/2/" rel="nofollow">https://jsfiddle.net/827vuyqb/2/</a></p>

<p>Any solutions, workarounds for this?</p>