Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Schedule tasks for timeline updates #192

Merged
merged 2 commits into from
Jan 29, 2024
Merged

Schedule tasks for timeline updates #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb8807d
Schedule tasks in stead of animation frames for updating timelines
johannesodland Dec 28, 2023
3d8815b
Update timeline and animations when children of source element are re…
johannesodland Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions src/scroll-timeline-base.js
View file
Open in desktop
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
Open in desktop
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
Loading