Chrome中fieldset内的input range滑块卡顿问题解决咨询

你遇到的问题源于Chrome渲染引擎对<fieldset>内部元素布局变化的处理逻辑：拖动range滑块经过值5时，显示/隐藏<p>元素会触发整个<fieldset>的重排，和滑块的拖动动画产生冲突，进而造成卡顿；Firefox的渲染优化逻辑不同，因此没有这个问题。以下是几个无需替换<fieldset>的解决办法：

方法1：将隐藏文本移出<fieldset>，通过CSS定位保持视觉位置 #

把需要显示/隐藏的文本放到<fieldset>外部，用CSS调整位置使其和原位置一致，这样<fieldset>内部无布局变化，不会触发重排：

<fieldset>
  <input type="range" id="inputRange" min=1 max=10 value=1>
</fieldset>
<!-- 通过margin/top等样式调整位置，匹配原视觉效果 -->
<p id="text" hidden style="margin-top: 8px;">Hey!</p>

<script>
  const range = document.getElementById('inputRange');
  const text = document.getElementById('text');
  range.addEventListener('input', () => text.hidden = range.value != 5);
</script>

方法2：用CSS视觉隐藏代替hidden属性 #

hidden属性本质是设置display: none，会触发布局重排；改用opacity和visibility实现视觉隐藏，只会触发重绘（不改变布局），避免<fieldset>的重排：

<fieldset>
  <input type="range" id="inputRange" min=1 max=10 value=1>
  <!-- 初始设置视觉隐藏，取消过渡避免动画干扰 -->
  <p id="text" style="opacity: 0; visibility: hidden; transition: none;">Hey!</p>
</fieldset>

<script>
  const range = document.getElementById('inputRange');
  const text = document.getElementById('text');
  range.addEventListener('input', () => {
    const shouldShow = range.value == 5;
    text.style.opacity = shouldShow ? '1' : '0';
    text.style.visibility = shouldShow ? 'visible' : 'hidden';
  });
</script>

方法3：防抖input事件（不推荐，存在延迟） #

如果前两种方法不适用，可以给input事件添加防抖逻辑，减少布局变化的触发频率，但会带来轻微的响应延迟：

<fieldset>
  <input type="range" id="inputRange" min=1 max=10 value=1>
  <p id="text" hidden>Hey!</p>
</fieldset>

<script>
  const range = document.getElementById('inputRange');
  const text = document.getElementById('text');
  let debounceTimer;
  
  range.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      text.hidden = range.value != 5;
    }, 15);
  });
</script>

优先推荐前两种方法，既能保留<fieldset>的无障碍特性，又能彻底解决Chrome的卡顿问题。

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