Windows系统Chrome浏览器中移动HTML元素闪烁问题求助

针对Windows系统Chrome里1px垂直线移动时不定期消失的问题，可通过以下几种方式解决：

• 改用box-shadow模拟1px线条
  Chrome在Windows下对1px宽度的元素做亚像素定位时容易出现渲染丢失，用box-shadow替代width属性可以规避这个问题：

  .playhead {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* 去掉原有的width:1px */
    box-shadow: 0 0 0 1px red; /* 用阴影模拟1px线条 */
    z-index: 3;
    user-select: none;
  }
  

• 使用transform替代修改left属性
  修改left会触发页面重排，而transform属于合成层操作，渲染更高效且能避免闪烁问题，同时配合will-change提示浏览器优化：

  let i = 0;
  (function tick() {
    requestAnimationFrame(() => {
      const playhead = document.querySelectorAll("div.playhead")[0];
      playhead.style.transform = `translateX(${i}px)`;
      if (i === 500) return;
      i++;
      tick();
    });
  })();
  

  对应的CSS添加：

  .playhead {
    will-change: transform;
  }
  

• 触发硬件加速
  通过添加3D变换属性触发浏览器硬件加速，提升渲染稳定性：

  .playhead {
    transform: translateZ(0);
  }
  

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