移动端滚动页面时导航栏CSS图标消失问题排查

移动端滚动时导航图标消失由三个核心问题导致：

• 响应式样式适配缺失：移动端导航栏高度仅设置为65px，但未在对应媒体查询中重写.nav_bar__links的布局规则——桌面端为侧边栏写的纵向flex排列、40px项间距、30px上外边距，会让图标整体向下偏移超出导航栏可视边界，页面滚动触发浏览器重绘时，超出部分会被默认裁剪。
• 定位与层叠规则不完整：桌面端.nav_bar未设置非static的position属性，声明的z-index:9不生效；移动端fixed定位的导航栏层级不足，滚动时会被其他设置了层叠上下文的页面元素覆盖。
• 层叠上下文冲突：如果导航栏的任意父级元素设置了transform、filter、perspective、will-change等会创建独立层叠上下文的属性，会导致子元素的fixed定位基准从视口变为父元素，滚动时直接出现位置偏移、被裁剪的问题。

替换原有样式为以下代码，核心改动包括补全桌面端定位规则、重写移动端图标容器布局、拉高导航栏层级、明确渲染边界：

.nav_bar{
    height:100vh;
    width: 75px;
    background-color:#2e2e2e;
    z-index: 9;
    // 补全桌面端定位，让z-index生效，侧边栏固定在视口左侧
    position: fixed;
    left: 0;
    top: 0;
    overflow: visible;

    @include media(tablet, mobile){
        top: auto;
        bottom: 0;
        height: 65px;
        width: 100%;
        left: 0;
        // 拉高移动端导航层级，避免被页面内容覆盖
        z-index: 999;
        // 触发GPU渲染，解决iOS Safari滚动时的重绘异常
        transform: translateZ(0);
    }

    &__links{
        position: relative;
        @include flex(center, flex-start);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap:40px;
        margin-top: 30px;
        z-index: 99;
        height: 100%;

        // 补全移动端布局规则，改为横向均匀排列
        @include media(tablet, mobile){
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            gap: 0;
            margin-top: 0;
            width: 100%;
        }
    }
}

• 遍历导航栏的所有父级元素，移除父元素上设置的transform、filter、perspective属性，避免破坏fixed定位的基准。
• 上线前清空浏览器缓存，确认媒体查询样式正确加载，避免旧缓存的样式规则干扰渲染。
• 若使用iOS Safari测试，可给html、body标签设置height: 100%; overflow-x: hidden;，避免横向滚动条触发的fixed定位异常。

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