Bug 246533 - Unable to resize container with shadow DOM container query
Summary: Unable to resize container with shadow DOM container query
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks: 148695
  Show dependency tree / graph
 
Reported: 2022-10-14 13:08 PDT by Noah Liebman
Modified: 2022-10-21 13:09 PDT (History)
4 users (show)

See Also:

Attachments
rendering in Safari, chrome, firefox (112.63 KB, image/png)
2022-10-21 01:34 PDT, Karl Dubost 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Noah Liebman 2022-10-14 13:08:27 PDT 
When a container contains a web component that uses a container query (e.g., `container-type: inline-size`) in its shadow DOM, it’s not possible to resize the container with the CSS `resize` property. It works in Edge and Chrome.

Demo: https://codepen.io/noleli/pen/jOxJVPw
Comment 1 Karl Dubost 2022-10-21 01:34:30 PDT 
Created attachment 463140 [details]
rendering in Safari, chrome, firefox

* Safari  can't drag to resize
* Chrome  can drag to resize AND it changes color
* Firefox can drag to resize AND it DOES NOT change color
Comment 2 Noah Liebman 2022-10-21 09:27:30 PDT 
Thanks for the breakdown. To clarify, it doesn’t change color in Firefox because Firefox doesn’t support container queries yet. (It’s behind a flag `layout.css.container-queries.enabled`, but still has some issues.)
Comment 3 Radar WebKit Bug Importer 2022-10-21 13:09:18 PDT 
<rdar://problem/101438469>