chrome中overflow-hidde的圆角元素下面带有transform相关动画的子元素溢出圆形父元素的bug

hdm58

hdm58

发表于 2017-01-09 12:44:04
内容来源: 网络

今天在完成一个圆形logo上闪光的效果时,发现一个-webkit-内核浏览器的一个bug。下面来说说bug具体表现和解决办法。

1.bug描述

在webkit内核浏览器中,设置了圆角(border-radius)和超出隐藏(overflow-hidden)属性的元素,当它的子元素通过动画改变关于 transform 的属性时,子元素会溢出圆形区域。

css代码:
.test{width: 200px;height: 200px;background: #666 url(http://www.zengkan.win/wp-content/uploads/2016/12/PNG_20160612_094635_-743118966.jpg);background-size: cover;border-radius: 50%;overflow: hidden;position: relative;}
.light{display: inline-block;width: 5px;height: 300px;background:  rgba(255,255,255,0.5);box-shadow: 0 0 6px #fff;position: absolute;left: -30px;top: -133px;transform:rotate(45deg);animation: light 1s infinite linear;}
@keyframes light{0%{transform:rotate(45deg) translateX(0px);}100%{transform:rotate(45deg) translateX(400px);}}
HTML代码:
<div class="test">
    <span class="light"></span>
</div>

在上面代码中,span元素通过 animation 改变 transform 属性,来实现图片上闪光的效果。详细代码和demo。demo中有三个相同的块,分别用 animation、transition、和 js 实现这个效果。

chrome浏览器实现结果如图:

可以看到三条白光都溢出了圆形区域,且在正方形的边界被截断。图片元素的 overflow-hidden 属性没有按照 border-radius 之后的元素执行。在其他 webkit 浏览器(360浏览器、opera)测试,也是一样的问题。

火狐浏览器实现截图:

三条白光在圆形区域之外被正确截断,实现没有问题。
在edge、ie浏览器中测试,结果都正常。

点击demo,在不同浏览器中打开,可以看到各自的效果。

2.解决办法

在StackOverflow中找到了下面两个解决办法。

2.1

图片元素设置明确z-index值。查看demo
设置之后,确实解决了问题,不过我还不清楚是怎么解决的。希望知道原因的好心人能够告诉我。

2.2

通过 webkit 支持的 mask-image 属性解决。查看demo
用一个1px的图片做图片元素的遮罩,解决了问题,但还是不清楚原理。同希望知道原因的好心人能够告诉我。

3.参考

  1. 用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下)

  2. stackoverflow问题地址:How to make CSS3 rounded corners hide overflow in Chrome/Opera

内容来源:https://segmentfault.com/a/1190000008053371

相关帖子
用户评论
开源开发学习小组列表