Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[css-viewport] [css-contain] Zoom and container queries#10268

Open
emilio opened this issue Apr 29, 2024 · 2 comments
Open

[css-viewport] [css-contain] Zoom and container queries #10268

emilio opened this issue Apr 29, 2024 · 2 comments
Labels
Agenda+ css-contain-2 Current Work css-viewport-1

Comments

@emilio
Copy link
Collaborator

emilio commented Apr 29, 2024

How should CSS zoom be handled (if at all) in a @container query?

A container query like @container (width > 100px) { } is rather weird wrt CSS zoom. Should it use pixels:

  • As considered by the page (un-zoomed).
  • As considered by the container.
  • As considered by the element you're styling.

Safari disagrees with Chrome / Firefox on this test-case:

<!doctype html>
<style>
  .container {
    container-type: inline-size;
    width: 100px;
    height: 100px;
  }
  .child {
    background-color: red;
    height: 50px;
    width: 50px;
    @container (width > 120px) {
      background-color: green;
    }
  }
</style>
<div class="container">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="child"></div>
</div>
<div class="container" style="zoom: 2">
  <div class="nested" style="zoom: 2">
    <div class="child"></div>
  </div>
</div>
<div class="outer" style="zoom: 2">
  <div class="container">
    <div class="child"></div>
  </div>
</div>

Same for container query relative units, I suspect that the best behavior involves some gymnastics with the container and child effective zoom values. Not sure what browsers implement there (Firefox doesn't zoom them at all so they use the coordinate space of the container).

cc @chrishtr @lilles @andruud @nt1m @mirisuzanne @tabatkins
@emilio emilio changed the title [css-viewport] [css-container-queries] Zoom and container queries [css-viewport] [css-contain] Zoom and container queries Apr 29, 2024
@lilles
Copy link
Member

lilles commented Apr 29, 2024

I don't think we made a conscious choice here, but the width/height of the container in CSS pixels as seen by the container just follows from the implementation.

@mirisuzanne
Copy link
Contributor

I agree, that feels best aligned to how we resolve relative units on the container.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ css-contain-2 Current Work css-viewport-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests

3 participants
@mirisuzanne @lilles @emilio