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