问题描述:
父元素存在定位,border-radius,overflow:hidden属性,子元素需要实现从左到右的动画,因为子元素是平行四边形,当平移到父元素的最右边的时候,子元素的右上角在安卓上面实现了隐藏 但是在ios系统上面 父元素的overflow:hidden没生效
原因:
其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效。
解决方案:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
把这两个css属性放到父级就可以了~~~
ps:代码如下~~~
<div class="parent">
<img src="...">
<div class=“child”><span></span></div>
</div>
.parent {
margin-right: 0.24rem;
width: 2.133333rem;
height: 2.133333rem;
position: relative;
>img {
width: 2.133333rem;
height: 2.133333rem;
display: block;
}
>.child{
width: 0.826667rem;
height: 0.453333rem;
background: url('../../../static/images/scholarship/new_course_tag.png') no-repeat left top/100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-top-right-radius: 0.213333rem;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
>span {
display: block;
position: absolute;
top: 0;
left: 0;
background: url('../../../static/images/scholarship/new_course_tag_bg.png') no-repeat left top/0.4rem 0.453333rem;
animation: style-icon-bg 1s infinite;
}
}
}