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

时间:2016-10-19 12:23:40

标签: css google-chrome css-transitions

不确定它是否是特定于铬的bug或者是什么,但是当我在具有以边框半径隐藏的溢出的父级上转换子元素时,溢出是可见的,而转换已到位。



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>
&#13;
&#13;
&#13;

这是展示问题https://jsfiddle.net/827vuyqb/2/

的小提琴

任何解决方案,解决方法吗?

1 个答案:

答案 0 :(得分:8)

只需定位包装元素,并为其指定type ErrorResponse struct { Status string `json:"status"` Error string `json:"error"` } err := errors.New("Total Price cannot be a negative value") errRes := ErrorResponse{"ERROR", err.Error()} response, errr := json.Marshal(errRes) if errr != nil { log.Fatal(err) // you should write something to responseWriter w here before returning http.Error(w, "Internal server error", http.StatusInternalServerError) return } io.WriteString(w, string(response))

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;
}

相关问题