background-attachment: fixed 在iphone设备失效

背景页面中使用了 background-attachment:fixed; 来控制背景图不随内容的滚动而滚动，使其固定大小。在PC端可以起作用和一些安卓的机器上能够起作用，但是在iphone上没有效果。原因固定背景导致重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。解决方案&::after {content: '';position: fixed;z-index: -1

Fiona Fang

31899人浏览 · 2021-08-06 17:33:42

Fiona Fang · 2021-08-06 17:33:42 发布

背景

页面中使用了 background-attachment:fixed; 来控制背景图不随内容的滚动而滚动，使其固定大小。
在PC端可以起作用和一些安卓的机器上能够起作用，但是在iphone上没有效果。

原因

固定背景导致重绘的成本很高，并且滚动表现也不尽人意，所以在一些移动端是被禁止的。

解决方案

    &::before {
        content: '';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('../../../assets/images/activity/starair/background.png') no-repeat 0 0/100% 17.786667rem;
        background-size: cover;
    }