[Resolved] Fullwidth area not working in Safari

[mkjj]

This ist not really a support question. It might be beyond the scope of a support forum. I fully understand if you can’t take the time to answer it. However, since you are so good with CSS, I have some hope. 🙂

I pretty often use fullwidth sections on pages that have a boxed layout like on this page (the large blue section below the grid):

https://www.agoshop.de/

(It is intended that the background does not cover the whole image at the bottom.)

David kindly helped me out with this CSS, which works perfectly fine:

margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);

This is the entire CSS for the section:

.fullwidth-banner {
    background-image: radial-gradient( ellipse farthest-corner at center bottom, #00a5e8 0%, var(--light-blue-color) 70%, var(--light-blue-color) 100% );
    background-size: auto calc(100% - 90px);
    background-repeat: no-repeat;
    border-top: 1px solid #ededed;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4em 1em 0 1em;
    margin-top: 1em;
    text-align: center;
}

Now, I’ve just found out that Safari has some problems. It shows a white empty space on the right side like so:

Safari 15 with OS 15 or 10.15 seems to be the only combinations that does not mess up the CSS. In Windows it works fine on pretty much all devices and browsers apart from Internet Explorer. But I couldn’t care less about IE.

Since I don’t have Apple devices, it is very difficult to troubleshoot. Any help would be very much appreciated.

Thank you!

[David]

Hi there,

you can try adding: max-width: 100vw; property to your .fullwidth-banner CSS
But this CSS Hack is a little bit hit and miss and different browsers on different OSs may have an issue with it. Normally Chromium browsers on Windows has an issue with it.

My personal approach would be to make the Page Full Width, and then contain the sections that i want to keep contained…

[mkjj]

Thank you for pointing me in the right direction. It turned out that it’s not the width part causing the trouble, but the background size part. It seems that Safari on desktop and both Chrome and Safari on mobile don’t like this CSS:

background-size: auto calc(100% - 90px);

Removing it removes the problem. I have no idea how to fix this, since the combination of relative and absolute height is needed here to make it fully responsive.

[mkjj]

I could probably put the image outside the blue section and do something like this:

.fullwidth-banner {
padding-bottom: 90px
}
.image-wrapper {
margin: auto;
margin-bottom: -90px;
}

Should work, but it’s not very clean CSS, I guess. Would you consider this acceptable?

[mkjj]

I think, I’ve just found out what the issue is. Safari and Chrome/iOS seem not to understand the “auto” value in

background-size: auto ...

It seems to work after changing it to:

background-size: 100% calc(100% - 90px);

[David]

Is it working correctly now ?

[mkjj]

Hi David,

as much as I can see, yes. It seems that the “auto” value for the background size is not working in Safari.

Mike

[David]

Thats very odd especially as its affecting the container overflow. I may have to do some investigating.

[mkjj]

Let me know, if I can help somehow. Unfortunately, troubleshooting is quite tedious for me without any Apple devices. I have to go to the local Apple store for testing the results. Lambdatest does quite a good job for desktop, but is not very reliably for mobile devices.

[mkjj]

I’ve just set up two static html pages that contain only the needed HTML and CSS:

This page uses the “auto” value.

This page uses the “100%” value.

According to Lambdatest, only the second page is rendered correctly in Safari.

[David]

Yeah – Safari renders it differently to Chrome for sure. Its maintaining aspect ratio of the background. Whereas other browers are stretching them. So hard to say if Safari is wrong or right – as its a different interpretation of the spec.

This light reading ( lol 🙂 ) on the property may provide some insight to what its doing as specs vary across browsers:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#intrinsic_dimensions_and_proportions

and particularly on Gradients:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#working_with_gradients

But it seems you found the solution using 100% instead of auto which is logically correct.

[mkjj]

Thank you, David. Interesting. It seems that the combination of auto and a pixel value is not safe. Let alone a combination of auto and calc, I guess. Changing auto to a percentage value was really just trial and error.

These are the pleasures of recreating a design properly that was formerly made using a crappy visual editor. 🙂

[David]

I kind of hope for the day that all browsers interpret CSS in the same way.
But then we wouldn’t have these amusing anecdotes to keep our web developing fun 🙂

Nice find. Thanks for sharing.

[mkjj]

But then we wouldn’t have these amusing anecdotes to keep our web developing fun

Nicely put, David! 🙂

On the other hand, working with CSS has been so much harder 10 years ago. I look at you, Internet Explorer! Nowadays, results are quite consistent, if you avoid cutting edge CSS.

Having said this, Microsoft is still a reliable source of frustration, if you have to create HTML emails that work in Outlook. 🙂

Thanks again for your generous help. This was really a hard nut to crack.

[David]

Glad to be of some help 🙂

[Author]

Posts