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