Skip to content

Commit

Permalink
Schedule tasks for timeline updates (#192)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johannesodland
johannesodland authored Jan 29, 2024
1 parent 28c0118 commit 4229714
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 10 deletions.
15 changes: 9 additions & 6 deletions src/scroll-timeline-base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,9 +233,8 @@ function updateMeasurements(source) {
if (details.updateScheduled)
return;

requestAnimationFrame(() => {
// Defer ticking timeline to animation frame to prevent
// "ResizeObserver loop completed with undelivered notifications"
setTimeout(() => {
// Schedule a task to update timelines after all measurements are completed
for (const ref of details.timelineRefs) {
const timeline = ref.deref();
if (timeline) {
Expand All @@ -249,7 +248,8 @@ function updateMeasurements(source) {
}

function updateSource(timeline, source) {
const oldSource = scrollTimelineOptions.get(timeline).source;
const timelineDetails = scrollTimelineOptions.get(timeline);
const oldSource = timelineDetails.source;
if (oldSource == source)
return;

Expand All @@ -273,7 +273,7 @@ function updateSource(timeline, source) {
}
}
}
scrollTimelineOptions.get(timeline).source = source;
timelineDetails.source = source;
if (source) {
let details = sourceDetails.get(source);
if (!details) {
Expand All @@ -288,10 +288,13 @@ function updateSource(timeline, source) {
// Use resize observer to detect changes to source size
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
updateMeasurements(entry.target)
updateMeasurements(timelineDetails.source)
}
});
resizeObserver.observe(source);
for (const child of source.children) {
resizeObserver.observe(child)
}

// Use mutation observer to detect updated style attributes on source element
const mutationObserver = new MutationObserver((records) => {
Expand Down
8 changes: 4 additions & 4 deletions test/expected.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -676,7 +676,7 @@ PASS /scroll-animations/scroll-timelines/cancel-animation.html The finished prom
PASS /scroll-animations/scroll-timelines/cancel-animation.html The cancel event should NOT be fired if the animation is already idle
PASS /scroll-animations/scroll-timelines/cancel-animation.html Canceling an animation should fire cancel event on orphaned element
PASS /scroll-animations/scroll-timelines/cancel-animation.html Canceling an animation with inactive timeline should cause its start time and hold time to be unresolved
FAIL /scroll-animations/scroll-timelines/cancel-animation.html oncancel event is fired when the timeline is inactive.
TIMEOUT /scroll-animations/scroll-timelines/cancel-animation.html oncancel event is fired when the timeline is inactive.
PASS /scroll-animations/scroll-timelines/constructor-no-document.html The source can be null if the document.scrollingElement does not exist
PASS /scroll-animations/scroll-timelines/constructor.html A ScrollTimeline can be created with a source
PASS /scroll-animations/scroll-timelines/constructor.html A ScrollTimeline can be created with a non-scrolling source
Expand Down Expand Up @@ -911,12 +911,12 @@ PASS /scroll-animations/scroll-timelines/scroll-animation-effect-phases.tentativ
PASS /scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html Play pending task doesn't run when the timeline is inactive.
PASS /scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html Animation start and current times are correct if scroll timeline is activated after animation.play call.
PASS /scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html Animation start and current times are correct if scroll timeline is activated after setting start time.
FAIL /scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html Animation current time is correct when the timeline becomes newly inactive and then active again.
PASS /scroll-animations/scroll-timelines/scroll-animation-inactive-timeline.html Animation current time is correct when the timeline becomes newly inactive and then active again.
FAIL /scroll-animations/scroll-timelines/scroll-animation.html Animation start and current times are correct for each animation state.
FAIL /scroll-animations/scroll-timelines/scroll-animation.html Animation start and current times are correct for each animation state when the animation starts playing with advanced scroller.
PASS /scroll-animations/scroll-timelines/scroll-animation.html Finished animation plays on reverse scrolling.
FAIL /scroll-animations/scroll-timelines/scroll-animation.html Sending animation finished events by finished animation on reverse scrolling.
FAIL /scroll-animations/scroll-timelines/scroll-timeline-invalidation.html Animation current time and effect local time are updated after scroller content size changes.
PASS /scroll-animations/scroll-timelines/scroll-timeline-invalidation.html Animation current time and effect local time are updated after scroller content size changes.
PASS /scroll-animations/scroll-timelines/scroll-timeline-invalidation.html Animation current time and effect local time are updated after scroller size changes.
FAIL /scroll-animations/scroll-timelines/scroll-timeline-invalidation.html If scroll animation resizes its scroll timeline scroller, layout reruns once per frame.
FAIL /scroll-animations/scroll-timelines/scroll-timeline-range.html Scroll timeline with percentage range [JavaScript API]
Expand Down Expand Up @@ -1077,5 +1077,5 @@ PASS /scroll-animations/view-timelines/view-timeline-source.tentative.html View
PASS /scroll-animations/view-timelines/view-timeline-source.tentative.html View timeline source is null when display:none
FAIL /scroll-animations/view-timelines/view-timeline-sticky-block.html View timeline with sticky target, block axis.
FAIL /scroll-animations/view-timelines/view-timeline-sticky-inline.html View timeline with sticky target, block axis.
FAIL /scroll-animations/view-timelines/view-timeline-subject-size-changes.html View timeline with subject size change after the creation of the animation
PASS /scroll-animations/view-timelines/view-timeline-subject-size-changes.html View timeline with subject size change after the creation of the animation
FAIL /scroll-animations/view-timelines/zero-intrinsic-iteration-duration.tentative.html Intrinsic iteration duration is non-negative

0 comments on commit 4229714

Please sign in to comment.