Stacked backdrop-filter blurs hurt perf on older devices

Open Beginner friendly
#66 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css, javascript
Domain
frontend, performance

Research direction

Start by locating the styles or components for TopBar, BottomNav, BottomSheet, dropdown, and sync-console, then identify where backdrop-filter blur is applied. Reproduce the open-sheet state on an older iOS Safari or mid-range Android Chrome device. Done means top-level surfaces retain the blur, inner elements do not, and the stacked-blur performance cost is reduced.

Written by the indexing model from the issue text.

Description

p3

`backdrop-filter: blur(20px)` is set on TopBar, BottomNav, BottomSheet, dropdown, sync-console — up to four can stack at once when a sheet is open. On older iOS Safari and mid-range Android Chrome each blur is a non-trivial GPU pass.

Fix: keep the blur on top-level surfaces (TopBar, BottomNav) but drop it on inner elements (sheet body, dropdown) since they sit over a solid `var(--paper)` anyway. Test on the slowest device you can find.

(From comprehensive review, finding C12.)

Dominant language
JavaScript
Stars
1
Forks
0
Avg merge
7h 40m
Merged PRs (30d)
23

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from silverbucket/setlist-roller

All issues in silverbucket/setlist-roller

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.