Bug 249992

Summary: [CSS Container Queries] @container query not affected when page Zoomed in our out
Product: WebKit Reporter: Roman Czerkies <dev>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Major CC: aroselli, dev, koivisto, m_dubet, rik, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
See Also: https://bugs.webkit.org/show_bug.cgi?id=263582

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.