父元素的overflow:hidden失效问题 ios系统兼容问题

问题描述：

父元素存在定位，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;
      }
    }
  }