iPhone端缩放背景视差效果下异常滚动问题咨询

问题根源在于：你用position: absolute结合transform: scale(9)放大背景图后，iOS Safari会错误地将放大后的背景图纳入滚动容器的可滚动范围计算，而桌面浏览器不会出现这个判定偏差。

以下是两种可行的解决方案：

方案一：将背景图设为固定定位（推荐） #

把背景图从绝对定位改为固定定位，让它绑定视口而非滚动容器，既保留视差效果，又不会干扰滚动容器的高度计算：

修改.background的CSS：

.background {
    position: fixed; /* 替换原absolute */
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw; /* 改为100vw确保覆盖整个视口 */
    object-fit: cover;
    z-index: -1;
    transform: translateZ(-10px) scale(9);
}

同时给.parallax_wrapper添加相对定位，确保内部内容的定位参照正确：

.parallax_wrapper{
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 5px;
    position: relative; /* 新增 */
}

修改后背景图会固定在视口，.parallax_wrapper的滚动只会由内部的snap组件决定，不会再滑到背景图底部。

方案二：强制限制容器的滚动范围 #

如果不想修改背景图定位，可以给.parallax_wrapper添加contain属性，强制浏览器将容器的布局和绘制限制在自身范围内，避免放大的背景图影响滚动判定：

.parallax_wrapper{
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 5px;
    position: relative; /* 确保背景图以容器为参照 */
    contain: layout paint; /* 新增，限制布局和绘制范围 */
}

这种方式会让浏览器只计算内部snap元素的总高度作为滚动范围，忽略放大的背景图。

内容的提问来源于stack exchange，提问作者Rubén Kaizen