Bug 249992 - [CSS Container Queries] @container query not affected when page Zoomed in our out
Summary: [CSS Container Queries] @container query not affected when page Zoomed in our...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 12
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-01-02 01:32 PST by Roman Czerkies
Modified: 2024-06-26 19:02 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Czerkies 2023-01-02 01:32:57 PST
When we zoom in or zoom out on in Safari, container queries are not affected by the change of the inline-size of the viewport.

That particularly affect the user accessibility.
Comment 1 Radar WebKit Bug Importer 2023-01-09 01:33:17 PST
<rdar://problem/104022272>
Comment 2 Roman Czerkies 2023-01-09 02:25:32 PST
It can be reproduced on : https://romanczerki.es/
Comment 3 Simon Fraser (smfr) 2023-01-10 09:14:56 PST
When you say "zoomed", how are you zooming? With Command-+, or pinch-zoom?
Comment 4 Roman Czerkies 2023-01-11 02:19:15 PST
When zooming with Command-+.

The normal behavior of the @container query on the `nav` element only appear when you increase or decrease the size of the viewport.
Comment 5 Antti Koivisto 2023-01-11 08:11:54 PST
I think we fail to take 'zoom' property into account when evaluating container queries.
Comment 6 Roman Czerkies 2023-09-04 04:28:53 PDT
A new wrong behavior detected about container queries:

* Set a `container` property in html element (as an Initial Containing Block)
* Zoom+- in the webpage, nothing happen 
* Reload the page to see the zoom effect

Don't know if this bug has to be fill in a new issue, but it sounds like to be involved in the same first reported (https://bugs.webkit.org/show_bug.cgi?id=249992#c0).
Comment 7 Roman Czerkies 2023-10-23 06:47:26 PDT
New wrong behaviors with a `container` property set on `html` element:

* Once in a while, when you open a link in this page and clic on precedent the page is not rendering (a blank page occurs).

* When media queries are updated from the device's operating system, or the user agent (`prefers-color-scheme` or `prefers-contrast` for instance) anything is updated, you have to reload the page to update the page and custom properties.