溢出隐藏的边框半径在铬中不起作用

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>