Header / Footer becoming unfixed in PWA on iPhone X after redirect
-
I have an error that seems to only crop up in a very narrow set of circumstances. I have a PWA with a fixed header and footer. We link to a partner website to handle user log-in, after which they are redirected back to the PWA. Everything seems to work fine… except on the iPhone X. As the page is scrolled, the footer slides up to the middle of the page, and the header slides off it completely. The issue only occurs when the web app is installed as a PWA, not when visiting the web site through Safari. Research seems to show there is a history of “position: fixed” elements breaking on iOS, but I haven’t found any clear solutions. Anyone encountered something similar, or have any suggestions?
-
Solved. The problem with the footer becoming un-anchored was apparently caused by our partner’s website, which was set to rotate to landscape mode. When they changed their setting, the problem disappeared.
We created an absolutely positioned div “off screen” anchored to the top of the viewport, that would provide a black background under the status bar area of X-series iPhones (for other reasons we had to make the status bar transparent). The redirect was un-anchoring that div. The solution was to move the anchor point so at least part of the div was on-screen (I used 100vh - 10px, anchored to the bottom of the screen. The div had a fixed height that extended above the top of the screen). Including here for reference in case anyone else has a similar issue.