Skip to content

[scroll-animations-1] How should ViewTimeline work on an inline or fragmented subject? #13818

@flackr

Description

@flackr

As part of the interop investigation, @kevers-google discovered that the test view-timeline-pseudo-on-scroller.html is only failing on chrome because it has an inline subject. This raised the question of how inline subjects should work.

According to the current spec, on view progress subjects:

View progress timelines are segments of a scroll progress timeline that are scoped to the scroll positions in which any part of the subject element’s principal box intersects its nearest ancestor scrollport

I think given the definition of inline in css-display it is expected that view timelines should work.

inline
The element generates a box that is inline-level when placed in flow layout. [CSS2]

However, I was then comparing this to what intersection observer does, as most developers conceptually think of a view timeline subject as similar to an intersection observer, and found the following:

Compute the Intersection of a Target Element and the Root:

To compute the intersection between a target target and an intersection root root, run these steps:

  1. Let intersectionRect be the result of getting the bounding box for target.

To get the bounding box

To get the bounding box for element, run the following steps:

  1. Let list be the result of invoking getClientRects() on element.
  2. If the list is empty return a DOMRect object whose x, y, width and height members are zero.
  3. If all rectangles in list have zero width or height, return the first rectangle in list.
  4. Otherwise, return a DOMRect object describing the smallest rectangle that includes all of the rectangles in list of which the height or width is not zero.

If my understanding is correct, this means that an intersection observer will produce results based on a bounding box and a view timeline will produce results based on the first box.

I propose view timelines should use the same bounding box of all boxes.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions