Pure CSS scroll-driven animations not working on iOS

[rapporian]

Problem

CSS scroll-driven animations using scroll-timeline don't work on iOS. No workarounds due to the rust scroll freeze bug.

css-scroll-driven-animations.mp4

Reproduction

Minimal repro: https://github.com/rapporian/css-scroll-driven-animations

git clone https://github.com/rapporian/css-scroll-driven-animations
cd css-scroll-driven-animations
dx serve --platform ios

The demo uses CSS like:

.snap-container {
    scroll-timeline-name: --snap-scroll;
    scroll-timeline-axis: y;
}

.progress-bar-css {
    animation: progressGrow linear;
    animation-timeline: --snap-scroll;
}

@keyframes progressGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

Expected Behavior

The progress bar and animated square should smoothly track scroll position using pure CSS, just as they do on web.

Actual Behavior

On iOS, the CSS scroll-driven animations don't run at all. The elements remain static.

Environment

• Dioxus 0.7.2
• Platform: iOS (WKWebView)
• Works correctly on: Web (Chrome, Safari, Firefox)

Related

• iOS Scroll freezes entire Rust event loop #5091