溢出隱藏的邊框半徑在鉻中不起作用

Question

不確定它是否是特定於Chrome的錯誤或內容，但是當我正在將具有邊框半徑的溢出隱藏的父元素上的子元素轉換時，溢出是可見的，到位。

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>