Skip to content

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

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
Open
emilio opened this issue Apr 29, 2024 · 5 comments
Open

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

emilio opened this issue Apr 29, 2024 · 5 comments
Assignees
@chrishtr
Labels
css-conditional-5 Current Work css-viewport-1 Needs Edits

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.

@astearns astearns moved this to Unsorted in CSSWG June 2024 meeting Jun 3, 2024
@frivoal frivoal added css-conditional-5 Current Work and removed css-contain-2 Current Work labels Jun 26, 2024
@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-viewport] [css-contain] Zoom and container queries, and agreed to the following:

  • RESOLVED: use chrome/firefox behavior
The full IRC log of that discussion <chrishtr> emilio: what firefox and chrome are doing for container queries and zoom in terms of coordinate space makes sense
<chrishtr> ("width/height of the container in CSS pixels as seen by the container", per lilless)
<chrishtr> rossen: propose to specify the chrome and firefox behavior
<chrishtr> rossen: would like to hear from webkit
<chrishtr> matthieu: don't have a strong opinion, if what chrome and firefox are doing makes sense then let's go wiethi that
<chrishtr> RESOLVED: use chrome/firefox behavior

@mozilla-apprentice mozilla-apprentice mentioned this issue Jun 26, 2024
Closed
@chromium-helper chromium-helper mentioned this issue Jun 26, 2024
Closed
@chrishtr chrishtr self-assigned this Jun 26, 2024
@svgeesus
Copy link
Contributor

It is unclear to me what specific spec changes need to be made on css-conditional-5 as a result of this resolution.

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 1, 2024
@chrishtr @chromium-wpt-export-bot
Add test for container queries + zoom
6720795 
Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Merged
aarongable pushed a commit to chromium/chromium that referenced this issue Aug 1, 2024
@chrishtr
Add test for container queries + zoom
e4c6df1 
Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 1, 2024
@chrishtr @chromium-wpt-export-bot
Add test for container queries + zoom
e7b26e8 
Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Aug 1, 2024
@chrishtr @chromium-wpt-export-bot
Add test for container queries + zoom
c7e5d02 
Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}
@chrishtr
Copy link
Contributor

chrishtr commented Aug 5, 2024

It is unclear to me what specific spec changes need to be made on css-conditional-5 as a result of this resolution.

I think the spec change needed there is to say that the principle box's bounds are unscaled.

Also: I added a testcase.

moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Aug 5, 2024
@chrishtr @moz-wptsync-bot
Bug 1911189 [wpt PR 47415] - Add test for container queries + zoom, a…
18d635a 
…=testonly

Automatic update from web-platform-tests
Add test for container queries + zoom

Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}

--

wpt-commits: c7e5d02fde894f342e825570d3293cbe08c8c32e
wpt-pr: 47415
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Aug 6, 2024
@chrishtr @moz-wptsync-bot
Bug 1911189 [wpt PR 47415] - Add test for container queries + zoom, a…
72daf84 
…=testonly

Automatic update from web-platform-tests
Add test for container queries + zoom

Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}

--

wpt-commits: c7e5d02fde894f342e825570d3293cbe08c8c32e
wpt-pr: 47415
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Aug 7, 2024
@chrishtr @moz-wptsync-bot
Bug 1911189 [wpt PR 47415] - Add test for container queries + zoom, a…
8360b72 
…=testonly

Automatic update from web-platform-tests
Add test for container queries + zoom

Resolution here: w3c/csswg-drafts#10268

(working on the spec PR in parallel)

Change-Id: I50f6ded8ca496525bde2f42530d192a750b82ba7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5757081
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1336249}

--

wpt-commits: c7e5d02fde894f342e825570d3293cbe08c8c32e
wpt-pr: 47415
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chrishtr chrishtr

Labels
css-conditional-5 Current Work css-viewport-1 Needs Edits
Projects
CSSWG June 2024 meeting
Status: Unsorted
Milestone
No milestone
Development

No branches or pull requests
8 participants
@mirisuzanne @frivoal @lilles @emilio @nt1m @svgeesus @chrishtr @css-meeting-bot