クロムでボーダー半径が隠れてオーバーフローが発生する

Question

クロム固有のバグかどうかはわかりませんが、オーバーフローがボーダー半径で隠されている親の子要素をトランジションするとき、オーバーフローは見えますが、所定の位置に。

var wrapper = document.getElementsByClassName('wrapper')[0], 
 
    img = document.getElementsByTagName('img')[0]; 
 

 
/* 
 
\t 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>

ここで問題にhttps://jsfiddle.net/827vuyqb/2/

を実証フィドルどれソリューション、このための回避策はありますか？

Answer 1

ただ、ラッパー要素を配置し、それをz-indexを与える：

var wrapper = document.getElementsByClassName('wrapper')[0], 
 
    img = document.getElementsByTagName('img')[0]; 
 

 
/* 
 
\t 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>