Chrome滚动时Label消失但样式未变问题排查

结合你的场景和给出的CSS代码，我整理了几个Chrome浏览器特有的渲染异常原因，以及对应的解决方向：

可能的诱因 #

• Chrome硬件加速渲染bug
  Chrome在滚动时会依赖硬件加速提升性能，但对于带有伪元素、设置了user-select: none的元素，偶尔会出现渲染层丢失的问题——简单说就是浏览器滚动时“遗漏”了这些元素的重绘，导致它们看起来消失了。这类问题在Chrome的新旧版本中都偶有发生。

• user-select: none与Chrome渲染逻辑冲突
  你给label设置了-webkit-user-select: none，虽然这个属性是用来禁止文本选中的，但Chrome在滚动时对带有该属性的元素有特殊的优化逻辑，可能和伪元素的渲染规则产生冲突，最终导致两者一同消失。

• Semantic-UI-React内部样式优先级冲突
  Semantic-UI-React本身对checkbox的激活状态有一套默认样式，可能你的自定义CSS在Chrome下优先级不足，或者和内部的opacity、visibility等属性产生了冲突，滚动时触发了样式的异常切换。

可行的解决尝试 #

1. 调整硬件加速相关属性
   尝试给label添加强制触发重绘的CSS属性，让浏览器正确渲染元素：

   .ui.checkbox input.hidden+label {
     /* 强制触发硬件加速，修复渲染层丢失问题 */
     transform: translate3d(0, 0, 0);
     backface-visibility: hidden;
   }
   

   如果上面的方法没用，试试禁用该元素的硬件加速：

   .ui.checkbox input.hidden+label {
     transform: none;
     will-change: auto;
   }
   

2. 验证user-select属性的影响
   先临时把-webkit-user-select: none改成-webkit-user-select: text，测试滚动时是否还会出现消失问题。如果问题消失，说明这个属性是诱因，可以用其他方式实现文本禁止选中的需求，比如结合pointer-events: none（注意不要影响点击交互），或者提升自定义CSS的选择器优先级。

3. 明确激活状态的伪元素样式
   确保激活状态下的伪元素样式没有被意外覆盖，添加明确的content和display属性：

   .ui.checkbox.checked input.hidden+label:before {
     content: ""; /* 确保伪元素有渲染内容 */
     display: inline-block; /* 确保伪元素处于可见状态 */
     /* 其他你需要的样式 */
   }
   

4. 滚动时强制元素重绘（兜底方案）
   如果前面的CSS调整都无效，可以尝试用JS在滚动事件中强制触发元素重绘：

   window.addEventListener('scroll', () => {
     const activeLabels = document.querySelectorAll('.ui.checkbox.checked input.hidden+label');
     activeLabels.forEach(label => {
       // 通过临时修改样式触发浏览器重绘
       label.style.display = 'none';
       label.offsetHeight; // 触发重绘
       label.style.display = '';
     });
   });
   

   这种方法属于临时hack，优先推荐用CSS方案解决问题。

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