New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New viewport units don't work on iOS #11574
Comments
➤ Razvan Litianu commented: Hi Winnie Teichmann, can you please give an example where this happens? And possibly a counter example from Chrome/Safari? |
It looks like https://bokand.github.io/demo/urlbarsize.html is one demo that shows the behavior difference. Try viewing that page in Firefox vs. Safari/Chrome on iOS. In Firefox, the colorful bars at the bottom-right are all the same height as each other (initially as well as after you scroll). |
@dholbert FYI: There’s a bunch of demos available on https://interop-2022-viewport.netlify.app/ for you to test all these, as part of last year’s Interop2022 Viewport Investigation. More specifically https://interop-2022-viewport.netlify.app/combined/viewport-units/ – which is an updated version of bokan’s demo – is relevant here. Related: Firefox (both on iOS and Android) resize the ICB when the Virtual Keyboard gets shown. Chrome on Android also used to do that, but no longer does as of version 108 and now lines up with Safari on iOS. This ICB resizing might need to be tackled first, as the Viewport Units are derived from them. |
Related, when opening a new tab and the bottom search bar has been minimized (by scrolling down), the new tab will be created with incorrect viewport height, until a scroll event occurs. This impacts anything positioned relative to the viewport. i.e. items positioned at bottom of the viewport will be below the search bar and invisible. |
I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1826410 on this, for what it's worth. (It might already be covered by some other issue; if so, we'll dupe it over.) |
➤ Laurie Marceau commented: Turning this ticket into a spike to document finding and path forward to implement the view ports within our app. |
➤ Razvan Litianu commented: This is the link ( https://docs.google.com/document/d/1Hki9FFjGe8Jsz72Rjqi0R1vB6LcrJFxcVNZfsNHnCuQ/edit?usp=sharing ) to my findings. I couldn’t find a solution yet. |
They work on Safari and Chrome on iOS. There are new APIs that should be used to make this work:
┆Issue is synchronized with this Jira Spike
The text was updated successfully, but these errors were encountered: