Sometimes the height does not change when orientation change from Landscape to Portrait on iOS PWA

[Takkiii]

Demo

https://user-images.githubusercontent.com/9721056/146038649-3836d61f-b1ae-4fc6-b565-97f6c77460f5.MP4

Detail

When changing orientation from Landspace to Portrait, sometimes the height doesn't change.

But this doesn't always happen, it's really sometimes. It may be reproduced immediately, or it may not be reproduced unless the orientation is changed many times.

I used next-pwa to make PWA, and [email protected] doesn't have this problem.

Source

Using [email protected]

https://github.com/Takkiii/pwa-orientation-behavior-app

Using [email protected]

https://github.com/Takkiii/pwa-orientation-behavior-app/tree/react-div-100vh/0.6.0

[mvasin]

Hey @Takkiii ! Thanks for the demos. Swapping document.documentElement.clientHeight for window.innerHeight took place for reasons outlined here https://github.com/mvasin/react-div-100vh/issues/37

Honestly, seems like there's no good solution (see https://github.com/mvasin/react-div-100vh/issues/75). Any changes we made so far fixed some of complaints but provoked others.

Seems like we just should wait for browser adoption of https://www.w3.org/TR/2021/WD-css-values-4-20211016/#dynamic-viewport-percentage-units which at the moment is non-existent https://caniuse.com/?search=dvh.

[shivamragnar]

Hey @Takkiii thanks for posting this issue, I am also having exactly the same issue. Have you come up with anything yet for this issue ?

[Takkiii]

Hi, @shivamragnar.

I haven't found a good solution, so I'm still using 0.6.0. I'm sorry I can't help you😢

[shivamragnar]

Thanks @Takkiii for the quick response, i will also try with 0.6.0 🙂