Search code examples
htmlcssiossafari

viewport-fit=cover does not work on the iOS Safari?

I am trying to get my website to fill the screen (notch) left and right sides when in landscape mode on IOS Safari but NONE of the solutions work.

I have added the meta tag <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and I have also added

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

I have noticed that background color on the body tag does work but I have background images that need to fill the space.

Does anyone have any ideas or solutions?

UPDATE:

Here is a screen shot of what I am talking about enter image description here

Here is the CSS

div.et_pb_section.et_pb_section_6 {
    background-position: center top;
    background-image: url(https://XXXXXX.com/wp-content/uploads/2023/05/[email protected]),linear-gradient(180deg,#80b6d7 0%,#d2c5de 100%)!important;
}
Solution

  • Figured out the problem. It was the two meta tags named viewport conflicting with each other and it was eventually found in my parent theme. So I was able to replace the function from the child theme.