Strange effects on mobile device - Adding whitespace to bottom of page & footer missing
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
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.
Comments
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/!
Hi,
Great to see that you handled it!
And thanks for sharing the solution.
Best regards