Re: [csswg-drafts] [css-position-3] Reinterpret viewport positioned (fixed, sticky) elements wrt virtual keyboard (#7475)

Having now read more of the above thread, has a ‘zoomed’ media query been suggested/considered?

If there are concerns with an FAB dominating the viewport when zoomed or performance being impacted when evaluating viewport units during zoom, maybe a boolean-, threshold- or step-based media query could be a compromise?

e.g. `@media (1 < zoom-level < 2)` (greater than 100%, less than 200%), akin to [the level 4 width queries](https://web.dev/articles/media-query-range-syntax)

`@media (zoom-threshold: 2)` – more basic threshold

`@media (zoomed: true)` - most basic boolean.

(Note: I’m suggesting only one of these would be implemented, they just have varying degrees of complexity)

This would present a multitude of options to authors, e.g. with any of the above, we could opt to only pin while the viewport remains unzoomed:

```css
@supports (position: fixed / fixed) {
  @media not (zoomed: true) {
    .fab { position: fixed / fixed }
  }
}
```

With `zoom-level`, we could adjust sizes for different zoom levels:

```css
@supports (position: fixed / fixed) {
  .fab { position: fixed / fixed }

  @media (zoom-level > 1) {
    .fab { font-size: 0.8em }
  }

  @media (zoom-level > 2) {
    .fab { font-size: 0.6em }
  }
}
``` 

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


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

Received on Monday, 6 May 2024 18:50:03 UTC