Bug 238339 - [CSS Container Queries] Different size rendered than Chrome
Summary: [CSS Container Queries] Different size rendered than Chrome
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-03-24 11:28 PDT by jec
Modified: 2022-03-29 04:51 PDT (History)
3 users (show)

See Also:


Attachments
Chrome (825.71 KB, image/png)
2022-03-24 11:28 PDT, jec
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description jec 2022-03-24 11:28:00 PDT
Created attachment 455658 [details]
Chrome

TP 142

Open https://jec.fyi/demo/css-container-queries in Chrome and Safari, and compare.

A few issues:

1. The initial view is different. Expected Chrome view.
2. Try to resize the container (white box) horizontally by dragging the triangle in the container's right bottom corner. Not able to resize it in Safari.

Chrome: https://imgur.com/qTe0po6
Safari: https://imgur.com/dl7ooAP
Comment 1 Radar WebKit Bug Importer 2022-03-24 16:06:43 PDT
<rdar://problem/90799512>
Comment 2 Antti Koivisto 2022-03-29 04:51:14 PDT
The test page uses obsolete syntax. The current spec interpretion of

@container size (max-width: 399px) {

is "match nearest width container that has name "size" and width <= 399px. There is no container with that name so nothing is matched.


Note that the current STP doesn't yet implement this fully though the trunk should.