Re: [csswg-drafts] [css-values-4] Visual viewport units (#7194)

The proposed Visual Viewport Units do not form a closing solution for the stated use-case of positioning above the Virtual/On-Screen Keyboard (OSK). Take this snippet that _should_ achieve the desired effect.

```css
#target {
  position: fixed;
  height: 2em;
  width: 100vvw;

  top: 100vvh;
  transform: translateY(-100%);
}
```

The code above only works when the top edges of the Layout Viewport and Visual Viewport line up. This, however, is not always the case. When scrolling down with the OSK shown, the Layout Viewport will initially stay where it is, and the user is merely moving the Visual Viewport down. Because the Visual Viewport always matches the device, the net result is that the Layout Viewport will “shoot up”. 

See illustration below where the FixedPos Element _(orange)_ appear to be floating in the middle of the Visual Viewport _(orange dotted line)_ once you scroll down, because it is laid out against the top edge of the Visual Viewport _(blue dotted line)_.

<img width="745" alt="image" src="https://user-images.githubusercontent.com/213073/176884020-b2d6ddec-2866-4cb9-8592-725df9250e2f.png">

To work properly one would also need the distance between the top edges of both viewports mentioned, which would introduce even more extra units.

The already mentioned [`position: device-fixed;`](https://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html#:~:text=the%20user%20interaction.-,position%3A%20device%2Dfixed,-Which%20of%20these) would form a more closing solution, as that would really keep items in place – even when the Visual Viewport moves or gets resized.




-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7194#issuecomment-1172235621 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 1 July 2022 11:15:39 UTC