DioxusLabs / DioxusLabs/dioxus

Pure CSS scroll-driven animations not working on iOS

Open
#5,145 0 comments 0 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.