iOS17 PWA `position: fixed` element breaks after a while

Question

apsm100 OP

Created Jan ’24

Replies 2

Boosts 1

Views 2.3k

Participants 3

I have a menu bar which overlays a body scroll in my PWA with styling:

position: fixed;
bottom: 0px;

This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use.

The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)).

On scroll down With the dialog open

This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML:

Create a PWA app on a iOS17 device with the following html:

https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html

Open the app and open and close the dialog a few times.
Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog.
Eventually you will see the bug.

I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use.

Thank you!

Boost

Answer 1

Sakhniuk OP

Jan ’24

Today I came across on the same issue. In my case the problem was about applying position: fixed to <body> element by shadcn Drawer package. When I opened the bottom drawer, that library updates position of the body and only in iOS PWA the bottom bar together with drawer content has been shifted.

Screenshot:

CleanShot 2024-01-10 at 19.58.05@2x.png

I've managed to fix it by adding height on the root HTML element:

html {
  min-height: calc(100% + env(safe-area-inset-top));
}

How it look after:

CleanShot 2024-01-10 at 19.58.40@2x.png

1

Answer 2

apsm100 OP

Jan ’24

@Sakhniuk Thank you for sharing. I don't think that is the bug I am mentioning. My layout is as expected with the PWA at launch and for most of its use. The layout only breaks when the app is left running for some time.

Here is my app with a fixed bottom bar, the layout is correct, on scroll the bottom bar remains fixed to the bottom:

Here is my app on scroll down some time later (a few hours), the bottom bar shifts up.

0