三星Galaxy S8上CSS Animation抢占焦点致页面无法滚动问题排查

这问题我之前在安卓设备上碰到过类似的，三星的浏览器（或者安卓版Chrome）对持续运行的CSS无限动画有一些特殊的行为，容易导致滚动事件被干扰。咱们一步步来看可能的原因和对应的解决办法：

1. 动画元素拦截了触摸滚动事件 #

你的.error、伪元素还有.info都是绝对定位的，而且在页面顶部层级较高。三星设备上，浏览器可能会把这些持续动画的元素识别为“可交互元素”，即使你加了user-select: none，它们还是会拦截触摸滚动事件，导致页面无法正常滚动。

解决办法：给所有动画相关的元素加上pointer-events: none，这样触摸事件会直接穿透到下面的页面内容，不会被动画元素拦截：

.error, .error::before, .error::after, .info {
  pointer-events: none;
}

这是最快速的验证方法，先试试这个能不能解决问题。

2. 无限动画占用过多主线程资源，导致滚动卡顿 #

你的页面同时运行了4个无限循环动画，而且部分动画使用了left这类会触发页面重排的属性（比如noise-1和noise-2里的left变化）。三星Galaxy S8的硬件性能相对较新设备弱一些，这些动画会占用大量主线程资源，导致滚动时浏览器无法及时响应。

优化方案：

• 把动画中修改left的逻辑换成transform: translateX()，因为transform属于浏览器优化的属性，只会触发复合层更新，不会重排页面：

  /* 修改 noise-1 动画 */
  @keyframes noise-1 {
    0%, 20%, 40%, 60%, 70%, 90% { 
      opacity: 0; 
      transform: translateX(0);
    }
    10% { opacity: .1; }
    50% { 
      opacity: .5; 
      transform: translateX(-6px); /* 替换 left: -6px */
    }
    80% { opacity: .3; }
    100% { 
      opacity: .6; 
      transform: translateX(2px); /* 替换 left: 2px */
    }
  }
  
  /* 同理修改 noise-2 动画 */
  @keyframes noise-2 {
    0%, 20%, 40%, 60%, 70%, 90% { 
      opacity: 0; 
      transform: translateX(0);
    }
    10% { opacity: .1; }
    50% { 
      opacity: .5; 
      transform: translateX(6px); /* 替换 left: 6px */
    }
    80% { opacity: .3; }
    100% { 
      opacity: .6; 
      transform: translateX(-2px); /* 替换 left: -2px */
    }
  }
  

• 给动画元素加上硬件加速标记，让动画在GPU上运行，减轻主线程压力：

  .error, .error::before, .error::after, .info {
    will-change: transform;
    transform: translateZ(0);
  }
  

3. 绝对定位元素的触摸范围超出视觉区域 #

你的.error元素设置了top: 0; bottom: 0; margin: auto;，虽然视觉上它只有60px高，但在安卓浏览器中，这种绝对定位的元素可能被计算为占据整个父容器的触摸区域，导致滚动时手指碰到的都是这个元素，无法触发页面滚动。

解决办法：
这个问题同样可以通过前面提到的pointer-events: none解决，或者调整元素的定位方式，比如只设置top: 50%; transform: translateY(-50%);来实现垂直居中，而不是用top:0; bottom:0; margin:auto;，这样元素的触摸范围就和它的视觉大小一致了：

.error {
  /* 替换原有的 top/bottom/margin 配置 */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

总结 #

建议先尝试添加pointer-events: none，这是最快速的修复方式。如果滚动还是有问题，再逐步优化动画的性能，替换重排属性为transform，开启硬件加速。这些调整不仅能解决三星设备的问题，还能提升整个网站在低性能设备上的流畅度。

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