DioxusLabs / DioxusLabs/dioxus
Pure CSS scroll-driven animations not working on iOS
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
## Problem
CSS scroll-driven animations using `scroll-timeline` don't work on iOS. No workarounds due to the rust scroll freeze bug.
[Screen Recording Showing Issue](https://github.com/user-attachments/assets/dcffbc67-471c-480a-b4ca-4cbf786a1338)
## Reproduction
Minimal repro: [https://github.com/rapporian/css-scroll-driven-animations](https://github.com/rapporian/css-scroll-driven-animations)
```bash
git clone https://github.com/rapporian/css-scroll-driven-animations
cd css-scroll-driven-animations
dx serve --platform ios
```
The demo uses CSS like:
```css
.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
- #5091
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.