WordPress Elementor站点Safari浏览器box-shadow动画显示异常求助

问题原因 #

Safari浏览器对SVG元素直接应用border-radius和动态box-shadow的兼容性支持不佳，不会将圆角属性同步应用到阴影的渲染上，因此会出现方形阴影的异常效果。

解决方案 #

将阴影动画、圆角属性从SVG元素迁移到包裹SVG的父元素（此处可直接选中包裹SVG的<a>标签）即可解决兼容问题，额外添加transform: translateZ(0)触发Safari的GPU硬件加速，可进一步避免动画渲染异常。

修改后的CSS代码如下，HTML代码无需调整：

/* 选中包裹SVG的a标签，添加圆角、动画相关属性 */
.hero_button_homepage .elementor-icon-box-icon a {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 150px !important;
  animation: pulse-orange 2s infinite !important;
  /* 触发Safari硬件加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 调整SVG样式，仅保留宽高适配父元素即可 */
.hero_button_homepage svg {
  width: 100%;
  height: 100%;
  border-color: red;
}

/* 动画代码可简化冗余前缀，保留标准和webkit前缀即可覆盖绝大多数场景 */
@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
  }
}

@-webkit-keyframes pulse-orange {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(249,172,102,0.7);
  }
  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(249, 172, 102, 0);
  }
}

内容的提问来源于stack exchange，提问作者David Pokorný