CSS @Supports在iOS/Safari中引发布局异常问题求助

问题根源 #

iOS Safari存在兼容性bug：虽然它能通过@supports (background-attachment: fixed)的语法检测，认为自己支持该属性，但在scroll-snap容器+100%高度区块的场景下，应用background-attachment: fixed会导致背景图片尺寸失效、布局错乱，和你遇到的“背景丢失宽高设置”表现一致。@supports仅判断语法支持，不保证实际渲染正常。

解决方案 #

方案1：精准排除iOS Safari

通过@supports结合Safari专属属性，只给真正能正常渲染的浏览器应用background-attachment: fixed，直接排除iOS Safari：

/* 替换原有的@supports块 */
@supports (background-attachment: fixed) and not (-webkit-touch-callout: none) {
    #outer_wrapper .content_section:nth-child(1) {
        background-attachment: fixed;
    }

    #outer_wrapper .content_section:nth-child(2) {
        background-attachment: fixed;
    }

    #outer_wrapper .content_section:nth-child(3) {
        background-attachment: fixed;
    }
}

-webkit-touch-callout是iOS Safari特有的CSS属性，用not排除后，Safari不会进入这个规则块，避免触发bug。

方案2：用伪元素重构视差效果（推荐）

放弃background-attachment: fixed，改用伪元素实现视差，彻底规避Safari的兼容性问题，所有浏览器表现一致：

/* 1. 修改.content_section基础样式，移除原有background相关属性 */
.content_section {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    position: relative;
    /* 新增：确保伪元素不超出区块 */
    overflow: hidden;
    background-blend-mode: multiply;
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 2. 给每个区块添加伪元素作为背景层 */
.content_section::before {
    content: '';
    /* 固定定位相对于视口，实现视差 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 放在区块内容下方 */
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-blend-mode: inherit;
}

/* 3. 为每个区块设置对应的背景图和遮罩 */
#outer_wrapper .content_section:nth-child(1)::before {
    background: rgba(20, 20, 20, 0.7) url("../media/hero_image-1_P576.png");
}

#outer_wrapper .content_section:nth-child(2)::before {
    background: rgba(20, 20, 20, 0.4) url("../media/hero_image-2_P576.png");
}

#outer_wrapper .content_section:nth-child(3)::before {
    background: rgba(20, 20, 20, 0.4) url("../media/hero_image-3_P576.png");
}

这种方式通过伪元素的fixed定位直接绑定视口，不受scroll-snap容器和区块高度的影响，完美实现视差效果，同时兼容所有浏览器。

额外注意点 #

• 保持原代码中html和body的高度设置（height: 100vh、min-height: -webkit-fill-available），确保区块能占满视口；
• 如果使用方案2，无需保留原有的@supports规则块，减少冗余代码。

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