用边框半径隐藏的溢出不在铬中工作 [英] Overflow hidden with border radius not working in chrome

问题描述

不确定它是否是特定于Chrome的错误或者是什么，但是当我在父级溢出隐藏边界半径的父级上过渡子元素时，溢出是可见的，而转换就位。

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>

/rel =nofollow> https://jsfiddle.net/827vuyqb/2/

任何解决方案，解决方法？

解决方案

推荐答案

只需定位包装元素，并给它一个 z-index ：

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;
  
  /*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>

这篇关于用边框半径隐藏的溢出不在铬中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！