1962617 - If root element doesn't take the viewport height, view transition snapshot gets stretched.

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Emilio Cobos Álvarez [:emilio]]

This can be seen in https://mdn.github.io/dom-examples/view-transitions/spa/, which works if you add :root { height: 100vh } or so.

Boris not sure if this happens to be fixed by the snapshot containing block changes? If not I can look into it.

Comment 1

[Boris Chiou [:boris]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #0)

This can be seen in https://mdn.github.io/dom-examples/view-transitions/spa/, which works if you add :root { height: 100vh } or so.

Boris not sure if this happens to be fixed by the snapshot containing block changes? If not I can look into it.

It's unfortunate my patch doesn't help this bug. It may be a different bug or I missed something.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Ok, no worries :)

Comment 3

[Boris Chiou [:boris]]

Attachment: testcase

We can easily reproduce this in the test. It seems we use the wrong height for ImageFrame, for root. The height of e1 looks normal.

Comment 4

[Boris Chiou [:boris]]

(In reply to Boris Chiou [:boris] from comment #3)

Created attachment 9484862 [details]
testcase

We can easily reproduce this in the test. It seems we use the wrong height for ImageFrame, for root. The height of e1 looks normal.

The frame tree (in CSS pixels) of view-transition-image-pair(root):

AbsoluteList@101a8e000 <
  Block(div)(0)@101b375c0 parent=101b37478 (x=0, y=0, w=1024, h=722.5) [content=109d0d540][cs=109823308][:view-transition-image-pair] <
    line@101b37a18 count=2 state=inline,clean,prevmarginclean,not-impacted,not-wrapped,no-break,clear-before:none,clear-after:none(x=0, y=0, w=0, h=0) <
      Placeholder(div)(0)@101b37810 parent=101b375c0 next=101b37998 (x=0, y=0, w=0, h=0) [content=109d0d5d0][cs=1098cc308][:-moz-oof-placeholder] outOfFlowFrame=ImageFrame(div)(0)@101b37708
      Placeholder(div)(1)@101b37998 parent=101b375c0 (x=0, y=0, w=0, h=0) [content=109d0d660][cs=1098cc308][:-moz-oof-placeholder] outOfFlowFrame=ImageFrame(div)(1)@101b37890
    >
    AbsoluteList@101a8e020 <
      ImageFrame(div)(0)@101b37708 parent=101b375c0 next=101b37890 (x=0, y=0, w=1024, h=230) [content=109d0d5d0][cs=109823708][:view-transition-old]
      ImageFrame(div)(1)@101b37890 parent=101b375c0 (x=0, y=0, w=1024, h=230) [content=109d0d660][cs=109823a08][:view-transition-new]
    >
  >
>

We can see that the height of the container (i.e. ::view-transition-image-pair) looks correct, but the height of ImageFrame (i.e. ::view-transition-new and ::view-transition-old) is stretched.

Also, after I added :root { height: 100vh }, the frame tree (in CSS pixels) looks like:

AbsoluteList@109e3dc20 <
  ImageFrame(div)(0)@101b35708 parent=101b355c0 next=101b35890 (x=0, y=0, w=1024, h=722.5) [content=109d0d5d0][cs=109823d08][:view-transition-old]
  ImageFrame(div)(1)@101b35890 parent=101b355c0 (x=0, y=0, w=1024, h=722.5) [content=109d0d660][cs=109818308][:view-transition-new]
>

The height is matched to ::view-transtion-image-pair(root).

Comment 5

[Boris Chiou [:boris]]

Yap. I know what happened. We use the wrong size for root in some places.

Comment 6

[Boris Chiou [:boris]]

Attachment: Bug 1962617 - Use snapshot containing block size for root when capturing the old/new states.

It seems we forgot to use the size of snapshot containing block when
capturing the root element. Refactor the code a little bit to make sure
we do the check every time.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/52064b4546b1
Use snapshot containing block size for root when capturing the old/new states. r=view-transitions-reviewers,emilio

Comment 8

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/52064b4546b1