"The site is https://spectrumoutage.org - it works perfectly on Chrome desktop and Android, but when I load it on my iPhone (Safari), the bottom footer seems to float up and cover the last 50px of the content."
"I've tried adding padding-bottom: 100px to the body and messing with the viewport height ( 100dvh vs 100vh), but it's acting super inconsistent."
"I'm not sure if it's my specific CSS grid setup or just a Safari quirk."
The site https://spectrumoutage.org displays correctly on Chrome desktop and Android. On iPhone Safari the bottom footer floats up and overlaps the last approximately 50px of content. Attempts to fix the issue included adding padding-bottom: 100px to the body and switching between 100dvh and 100vh for viewport height. Behavior remains inconsistent across loads and does not reliably respond to those adjustments. The problem may stem from the CSS grid layout interacting with Safari's viewport or positioning behavior on iOS. A quick check on other iPhone/Safari configurations is requested to confirm reproducibility.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]