I have an issue with some css implementation under iOS/Safari.

I’m currently working on a simple onepager website which has 3 content sections. Each section should fill the entire viewport.

For scrolling I have implemented a scroll-snap and (if supported) a parallax effect by applying “background-attachment: fixed;” to the background-image. As “fixed” is not supported by iOS/Safari, I have placed it in a “@supports” CSS rule.

However, this still breaks my layout under iOS/Safari. The background image seems to loose all the other rules/settings like width, height, etc.

Here Is the code

/*----------------------------------- Global/body styling -----------------------------------*/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    color: white;
}

html {
    font-size: 16px;
    height: -webkit-fill-available;
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch;
    -ms-scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: "Mulish", sans-serif;
    background-color: black;
    height: 100vh;
    min-height: -webkit-fill-available;
}

#outer_wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    position: relative;
}

.content_section {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    position: relative;
    background-blend-mode: multiply;
    -webkit-scroll-snap-align: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#outer_wrapper .content_section:nth-child(1) {
    background: rgba(20, 20, 20, 0.7) url("../media/hero_image-1_P576.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#outer_wrapper .content_section:nth-child(2) {
    background: rgba(20, 20, 20, 0.4) url("../media/hero_image-2_P576.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

#outer_wrapper .content_section:nth-child(3) {
    background: rgba(20, 20, 20, 0.4) url("../media/hero_image-3_P576.png");
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

@supports (background-attachment: fixed) {
    #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;
    }
    

When I remove the @supports rule everything works fine.

Does anyone know what is causing this issue?

Thank you in advance for your support

Best regards