Bug 246533

Summary:

Unable to resize container with shadow DOM container query

Product:

WebKit

Reporter:

Noah Liebman <noah>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, karlcow, koivisto, rniwa, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 12

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
rendering in Safari, chrome, firefox	none

Noah Liebman

Reported 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

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 attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 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

Noah Liebman

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

Radar WebKit Bug Importer

Comment 3 2022-10-21 13:09:18 PDT

<rdar://problem/101438469>

Ahmad Saleem

Comment 4 2025-01-21 20:51:44 PST

@Karl - is it reproducing for you on WebKit ToT (289219@main) [Minibrowser]? Because I am able to resize ShadowDOM one.

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