Bug 238339

Summary:

[CSS Container Queries] Different size rendered than Chrome

Product:

WebKit

Reporter:

jec <jec>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

koivisto, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Chrome	none

jec

Reported 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

Attachments
Chrome (825.71 KB, image/png) 2022-03-24 11:28 PDT, jec	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2022-03-24 16:06:43 PDT

<rdar://problem/90799512>

Antti Koivisto

Comment 2 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.

Note You need to log in before you can comment on or make changes to this bug.