White borders with iphone PWA landscape

[redbo]

Hello,

I am having this problem where Pattern Projector as a PWA on my iphone in landscape mode has these white letterbox borders. Maybe it started with the iOS 26 upgrade?

I'm running it locally modified to have viewport-fit=cover added to the viewport metadata, and that seems to let it fullscreen again. But I'm not sure if there are consequences for other platforms.

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index b1d773b..4b8a4f1 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
   metadataBase: new URL(APP_URL),
   description: "Calibrate your projector for sewing patterns",
   viewport:
-    "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no",
+    "viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no",
   applicationName: APP_TITLE,
   title: APP_TITLE,
   manifest: "/manifest.json",

[courtneypattison]

Thank you for reporting this issue @redbo and sorry for the wonkiness! What browser are you using? Is the app saved to your homescreen or do you just use it on the website? Would you be able to try a different browser and see if the same issue occurs? Also, what iPhone are you using?

Unfortunately, I can't find the iPhone I use for testing at the moment to try and duplicate this issue. I did a bit of research into viewport-fit=cover and it seems like if we go that route, we'll need to check the safe area insets for the header and side menu to make sure they don't end up behind anything on different devices.

Maybe it started with the iOS 26 upgrade?

It definitely could have. Browser/device updates often break something for us.