Open Bug 1999336 Opened 5 months ago Updated 4 months ago

Duplicate view-transition-name value while capturing old state with an IB split.

Categories

(Core :: CSS Transitions and Animations, defect, P3)

Product:
Core
Component:
CSS Transitions and Animations
Version:
Firefox 144
Type:
defect

Tracking

()

People

(Reporter: martin.trapp, Unassigned, NeedInfo)

References

(Blocks 1 open bug)

Details

This is a simpler version of https://bugzilla.mozilla.org/show_bug.cgi?id=1999309.
It also has the benefit that it demonstrates the behavior with valid HTML.

Steps to reproduce:
Start a view transition on a document containing <a href="#top" style="view-transition-name: something"><div>hey there</div></a>.

Minimal reproduction: codepen

  1. open console in devtools
  2. press button in codepen
  3. examine error message in console

Actual results:

document.startViewTransition() fails with a non unique view transition name error.

I first found this behavior with invalid HTML, where a block element was nested within an inline element.
But the transparent <a href="..."> around a <div> should be valid.

Expected results:

View transition should start and animate.

div-inside-a is effectively doing the same as any other random block-inside-inline.

The box structure created for these is fun.

If you're not relying on the inline bits (which would the empty in this case) the easy workaround is using something like display: block or inline-block on the link.

But yeah looks like a bug we should fix.

Blocks: css-view-transitions-1
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
Summary: Duplicate view-transition-name value while capturing old state → Duplicate view-transition-name value while capturing old state with an IB split.

I'll take a look when I'm back from vacation next week if nobody beats me to it, but this might be rather annoying to fix. At least the simple "single block inside single inline" would be nice to have working tho...

Flags: needinfo?(emilio)

I guess the other question is, should this transition at all? I/B splits have more than one more fragment, so per https://drafts.csswg.org/css-view-transitions-1/#capture-old-state-algorithm:

If element has more than one box fragment, then continue.

But then the spec carves out inline fragmentation as an exception here... So it's not clear if it applies or not.

Hi Emilio, unfortunately, browsers behave differently here, and code that works fine elsewhere might fail in Firefox. People who do not know what is happening behind the scenes might be confused when they are told that they have non unique names even though they already checked for duplicates.

Maybe instead of changing the behavior, it might be possible to improve the error message, which does not give any clues right now.

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