Strange effects on mobile device - Adding whitespace to bottom of page & footer missing

schnoedeltroedel · September 2023

Hey,

I'm in the final stages of a site and started testing. I'm always testing responsiveness with chrome devtools. And everything looked fine there. I then switched to my iPhone and tested there, only to see strange effects on several pages. I attached screenshots as pdfs form my cell phone.

screen 2 & 3 issues: adding whitespace at the bottom that leads to unnecessary vertical scrolling, bg image position is not fixed within the viewport.

screen 1 & 4 issues: complete footer is missing, adding whitespace at the bottom that leads to unnecessary vertical scrolling, bg image position is not fixed within the viewport.

The behaviour I would expect:

The background image is fixed (not position but background-attachment CSS property). The background image's position is fixed within the viewport , the content scrolls over it.
footer not missing

You can check out the page at: https://sanhaus.biz

1.pdf

4.pdf

3.pdf

2.pdf

Thanks for your support!

UPDATE: footer ist not missing, white text on white bg is just not visible. ? I will change bg color, so that at least the links are visible. The adding whitespace issue and background issues remain, though.

schnoedeltroedel · September 2023

Fixed it!

background-attachment: fixed is not working on iOS and Safari.

This is a workaround:

html::before {
    content: ' ';
    display: block;
    /* replace url with url to your background-image */
    background-image: url('https://domain.com/images/your_background_image.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* important! */
}

cudos to https://julia-vicentini.de/blog/background-attachment-fixed-ios-workaround/!

Phil · September 2023

Hi,

Great to see that you handled it!

And thanks for sharing the solution.

Best regards

Strange effects on mobile device - Adding whitespace to bottom of page & footer missing

Comments