ios使用transform的时候圆角变方框，border-radius失效问题

 

问题： 1. 使用ios的手机浏览器（safari/chrome）都会出现滚动的时候圆角短时间成方块，动画完成后，会变成圆角。似乎是因为ios手机会在transform的时候border-radius失效。

 

解决方法：在使用动画效果带transform的元素的上一级div元素的css加上下面语句

-webkit-transform:rotate(0deg);

 

例：

.father {
  width: 5.875rem;
  height: 6.5rem;
  background-color: #f3f3f3;
  border-radius: 0.375rem;
  overflow: hidden; -webkit-transform: rotate(0deg);
}

 /*动画元素 */
.father .imgWithAnim {
  width: 5.875rem;
  height: 6.5rem;
  z-index: 999;
  border-radius: 0.375rem;
  animation: bounce2 2s infinite;
  overflow: hidden;
}

@keyframes bounce2 {

  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }

  50% {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }


  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
  }

}

 

————————————————
原文链接：https://blog.csdn.net/plm609337931/article/details/104680922