Firefox浏览器锚点滚动卡顿问题排查求助

问题背景 #

我用锚点标签实现了可折叠区块，结构如下：

<div class="target" id="project-id"> </div>
<div class="proj">
<a class="projline" href="#project-id"></a>
   <div class="content wrap">
     content of project
   </div>
</div>

点击区块时页面会滚动至顶部，同时.content从display: none切换为display: flex。该功能在Safari、Chrome、Opera中流畅，但Firefox 133.0版本滚动卡顿明显。

相关核心CSS：

.content {
    width: var(--projline);
    padding: 0 var(--num) 0 var(--idw);
    opacity: 0;
    display: none;
    transition: padding .3s;
    flex-wrap: wrap;
    gap: var(--pad4) var(--pad4);
    margin: 0 var(--pad);
}

.target:target+ .line +.proj .projline {
    cursor: default;
    height: auto;
    margin-bottom: var(--pad4);
    transition: margin .3s
}

.target:target+ .line + .proj {
    cursor: default;
    border-color: #000;
    border-top-width: 0;
    overflow: auto;
    margin-bottom: var(--padish);
}
.target:target+ .line + header.proj {
    position: relative;
    /* no sticky here or no scroll */
}

.target:target + .line +.proj .hide, .target:target + .line .hide {
    display: block
}
.target:target+ .line +.proj .show {
    visibility: hidden
}

.target:target + .line +.proj .content {
    display: flex;
    padding-bottom: var(--pad6);
    opacity: 1;
    transition: padding-bottom .3s
}

卡顿原因拆解 #

• 布局突变与锚点滚动时序冲突：Firefox会先执行:target触发的布局重排（.content从none变flex导致页面高度骤变），再处理锚点滚动；而Chrome/Safari会将这两个操作合并优化，导致Firefox中出现滚动跳帧的卡顿感。
• 复杂选择器的样式计算延迟：CSS中使用了多层相邻兄弟选择器（target:target+ .line +.proj），Firefox对这类复杂选择器的优先级计算耗时更长，锚点滚动触发时布局还未稳定，引发滚动与重排的资源冲突。
• 不可过渡属性与过渡动画的冲突：display属性无法过渡，但你同时给.content设置了padding过渡。Firefox在处理这种“突变属性+过渡属性”的组合时，渲染队列容易阻塞，进一步加剧卡顿。
• 无尺寸锚点的定位偏差：.target元素没有高度，Firefox定位锚点时会出现计算偏差，再加上后续.content展开的高度突变，让滚动动作的连贯性被打破。

快速验证方案 #

• 给.target添加height: 1px，观察滚动卡顿是否缓解
• 把display: none/flex替换为visibility: hidden/visible + height: 0/auto的组合（保留过渡兼容性）测试
• 简化:target相关选择器层级，减少样式计算复杂度

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