[PR #23] [MERGED] fix: scope prefers-reduced-motion CSS to Sileo viewport only #25

New issue

Closed

opened 2026-03-02 05:16:37 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:37 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hiaaryan/sileo/pull/23
Author: @lubauss
Created: 2/21/2026
Status: ✅ Merged
Merged: 2/21/2026
Merged by: @hiaaryan

Base: main ← Head: fix/scoped-reduced-motion

📝 Commits (1)

cc182e3 fix: scope prefers-reduced-motion CSS to Sileo viewport only

📊 Changes

1 file changed (+4 additions, -3 deletions)

View changed files

📝 src/styles.css (+4 -3)

📄 Description

Summary

The @media (prefers-reduced-motion: reduce) block in styles.css uses an unscoped * selector that disables all CSS animations and transitions across the entire page — not just Sileo toasts.

Problem

When a user has prefers-reduced-motion: reduce enabled, importing Sileo's stylesheet causes every animation in the host app to break:

/* Current — affects entire page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

Any app using page transitions, animated modals, loading spinners, or third-party component libraries will have their animations killed.

Solution

Scope the reduced-motion overrides to Sileo's own DOM tree using the [data-sileo-viewport] attribute selector:

@media (prefers-reduced-motion: reduce) {
  [data-sileo-viewport],
  [data-sileo-viewport] *,
  [data-sileo-viewport] *::before,
  [data-sileo-viewport] *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

Files Changed

File	Changes
`src/styles.css` (lines 458-466)	Scope `*` selector to `[data-sileo-viewport]` descendants

Testing

Import Sileo in an app that has CSS animations (e.g., Tailwind animate-spin)
Enable prefers-reduced-motion: reduce in OS accessibility settings
Before fix: All app animations break
After fix: Only Sileo toast animations respect the reduced-motion preference

Backward Compatibility

No breaking changes
Sileo toast animations still respect reduced-motion preference
Host app animations are no longer affected

Fixes #19

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hiaaryan/sileo/pull/23 **Author:** [@lubauss](https://github.com/lubauss) **Created:** 2/21/2026 **Status:** ✅ Merged **Merged:** 2/21/2026 **Merged by:** [@hiaaryan](https://github.com/hiaaryan) **Base:** `main` ← **Head:** `fix/scoped-reduced-motion` --- ### 📝 Commits (1) - [`cc182e3`](https://github.com/hiaaryan/sileo/commit/cc182e35059298f9c8134034f2a434aeea88bb75) fix: scope prefers-reduced-motion CSS to Sileo viewport only ### 📊 Changes **1 file changed** (+4 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `src/styles.css` (+4 -3) </details> ### 📄 Description ## Summary The `@media (prefers-reduced-motion: reduce)` block in `styles.css` uses an unscoped `*` selector that disables **all** CSS animations and transitions across the entire page — not just Sileo toasts. ## Problem When a user has `prefers-reduced-motion: reduce` enabled, importing Sileo's stylesheet causes every animation in the host app to break: ```css /* Current — affects entire page */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } } ``` Any app using page transitions, animated modals, loading spinners, or third-party component libraries will have their animations killed. ## Solution Scope the reduced-motion overrides to Sileo's own DOM tree using the `[data-sileo-viewport]` attribute selector: ```css @media (prefers-reduced-motion: reduce) { [data-sileo-viewport], [data-sileo-viewport] *, [data-sileo-viewport] *::before, [data-sileo-viewport] *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } } ``` ## Files Changed | File | Changes | |------|---------| | `src/styles.css` (lines 458-466) | Scope `*` selector to `[data-sileo-viewport]` descendants | ## Testing 1. Import Sileo in an app that has CSS animations (e.g., Tailwind `animate-spin`) 2. Enable `prefers-reduced-motion: reduce` in OS accessibility settings 3. **Before fix:** All app animations break 4. **After fix:** Only Sileo toast animations respect the reduced-motion preference ## Backward Compatibility - No breaking changes - Sileo toast animations still respect reduced-motion preference - Host app animations are no longer affected Fixes #19 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>