热点地图pulse动画致部分手机页面闪烁问题求助

方案1：优化动画渲染性能（优先尝试） #

问题大概率是动画频繁触发浏览器重绘/回流导致的移动端闪烁，建议通过以下调整强制硬件加速并减少渲染开销：

• 给动画元素添加硬件加速触发属性，避免软件渲染卡顿：

.hotspot-pulse {
  animation: pulse 2.5s infinite cubic-bezier(0.55, 0, 0, 0.7);
  /* 开启硬件加速 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  /* 告诉浏览器提前准备动画属性，优化渲染 */
  will-change: transform, opacity;
}

• 同时修改@keyframes pulse，确保所有动画属性仅使用transform和opacity（这两个是浏览器唯一能通过硬件加速优化的属性）：

@keyframes pulse {
  0% {
    opacity: 0.6;
    transform: scale(1) translateZ(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) translateZ(0);
  }
  100% {
    opacity: 0.6;
    transform: scale(1) translateZ(0);
  }
}

方案2：添加浏览器前缀兼容老设备 #

部分安卓老版本WebKit内核浏览器对无前缀的CSS动画支持有bug，补全前缀：

.hotspot-pulse {
  -webkit-animation: pulse 2.5s infinite cubic-bezier(0.55, 0, 0, 0.7);
  animation: pulse 2.5s infinite cubic-bezier(0.55, 0, 0, 0.7);
}

@-webkit-keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes pulse {
  0% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.6; transform: scale(1); }
}

方案3：临时替换/禁用故障设备的动画 #

如果老板的设备是特定老机型，可针对性降级或禁用动画：

• 用媒体查询针对低性能设备调整：

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .hotspot-pulse {
    animation: none;
    opacity: 0.8;
  }
}

• 或通过JS检测UA添加禁用类：

if (/Android\s[4-6]/.test(navigator.userAgent)) {
  document.querySelectorAll('.hotspot-pulse').forEach(el => {
    el.classList.add('no-animation');
  });
}

对应CSS：

.no-animation {
  animation: none !important;
}

方案4：检查元素堆叠上下文 #

确保动画元素没有和页面其他元素（比如紫色标记块）产生渲染层冲突：

.hotspot-pulse {
  position: relative;
  z-index: 10;
  isolation: isolate;
}

优先测试方案1，它从根源优化了渲染性能，大概率解决多数移动端闪烁问题；若老板的设备是特定老机型，方案3可快速临时解决问题。

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