CSS发光效果在Safari（iPhone端）失效问题求助

针对你遇到的iPhone Safari中CSS发光效果失效问题，核心原因是Safari对部分CSS属性需要特定前缀支持，以及伪元素渲染的兼容性差异，以下是修复后的代码及关键说明：

修复后的完整代码 #

/*COLUMNS GLOW*/ 
.glow > .elementor-widget-wrap{
  position: relative;
}

.glow > .elementor-widget-wrap:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0; 
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  background: linear-gradient(270deg, #52a54a, #a3db73);
  /* Safari兼容的模糊效果前缀 */
  -webkit-filter: blur(100px);
  filter: blur(100px);
  /* Safari兼容的缩放效果前缀 */
  -webkit-transform: scale(.9);
  transform: scale(.9);
  background-size: 200% 200%; 
  /* Safari兼容的动画前缀 */
  -webkit-animation: animateGlow 3s ease infinite;
  animation: animateGlow 3s ease infinite;
  box-sizing: border-box;
}

/* Safari专属动画规则 */
@-webkit-keyframes animateGlow{
  0%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

@keyframes animateGlow{
  0%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
  100%{ background-position: 0% 50% }
}

.glow_btn .elementor-button-link{
  /* Safari兼容的动画前缀 */
  -webkit-animation: animateGlow 3s ease infinite;
  animation: animateGlow 3s ease infinite;
  background: linear-gradient(270deg, #52a54a, #a3db73);
  background-size: 200% 200%; 
}

关键修复点说明 #

• 前缀补全：Safari对filter、transform、animation这类属性仍需-webkit-前缀才能正常识别，尤其是旧版本iOS的Safari
• 动画规则兼容：单独添加@-webkit-keyframes版本的动画规则，确保Safari能解析渐变位置的动画逻辑
• 盒模型修正：添加box-sizing: border-box避免伪元素尺寸计算偏差，防止发光效果被意外截断

替换原代码后，刷新Safari即可看到正常的发光动画效果。

内容的提问来源于stack exchange，提问作者mgz069