Bug 290923
Summary: | View Transition break on inline parents with block children | ||
---|---|---|---|
Product: | WebKit | Reporter: | Sebastian Markbåge <sebastian> |
Component: | New Bugs | Assignee: | Matt Woodrow <mattwoodrow> |
Status: | NEW | ||
Severity: | Normal | CC: | bramus, graouts, mattwoodrow, ntim, webkit-bug-importer |
Priority: | P2 | Keywords: | InRadar |
Version: | Safari Technology Preview | ||
Hardware: | All | ||
OS: | All |
Sebastian Markbåge
If you try to start a View Transition when a parent with `display: inline` and `view-transition-name` has a `display: block` child then it leads to a duplicate name error.
https://repro-view-transition-inline-bug.vercel.app/
This errors with: InvalidStateError: Multiple elements found with view-transition-name: hi
The most common way this would happen is with:
<a href="..."><div>...</div></a>
It should be treated as if it was `display: inline-block`. When that is explicitly specified, it works.
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/148432507>
Tim Nguyen (:ntim)
I think this started happening when we started iterating over renderers instead of elements in ViewTransition.cpp to get pseudo-element support.
Matt Woodrow
Putting a block level element inside of an inline causes the inline to be fragmented (see https://www.w3.org/TR/CSS2/visuren.html#img-anon-block, and this resolution in particular - https://github.com/w3c/csswg-drafts/issues/1477#issuecomment-380771705).
View transitions names should be skipped if the named element is fragmented (https://drafts.csswg.org/css-view-transitions/#view-transition-name-prop - If the element’s principal box is fragmented, skipped, or not rendered, this property has no effect.)
I think we should be silently ignoring `view-transition-name: hi`, and just running a transition on the root element.
Matt Woodrow
Pull request: https://github.com/WebKit/WebKit/pull/45228
Matt Woodrow
Pull request: https://github.com/WebKit/WebKit/pull/45929