Mobile: tab bar progressive blur disappears during horizontal day swipe #1082

Open
opened 2026-10-05 03:23:50 +00:00 by kayg · 5 comments
Owner

Owner report (2026-10-05 08:44–08:49 IST, iPhone, production 269b1b51b, dark theme). Screenshots: owner's four phone captures (Day view during horizontal swipe, Day view at rest, Settings → Account sheet, Agenda).

"Progressive blur on tab bar disappears during horizontal scroll."

In the Calendar Day view, while swiping horizontally between days, the progressive blur behind the bottom mode tray (Tab bar) and the + button disappears: event cards show sharply behind the tray. The blur must stay during and after horizontal paging. While swiping, the time gutter also overlaps the previous day's event card (card text cut at the gutter edge).

Acceptance: real iPhone-size WebKit capture mid-swipe and at rest; reduced motion respected.

## Owner report (2026-10-05 08:44–08:49 IST, iPhone, production 269b1b51b, dark theme). Screenshots: owner's four phone captures (Day view during horizontal swipe, Day view at rest, Settings → Account sheet, Agenda). "Progressive blur on tab bar disappears during horizontal scroll." In the Calendar Day view, while swiping horizontally between days, the progressive blur behind the bottom mode tray (Tab bar) and the + button disappears: event cards show sharply behind the tray. The blur must stay during and after horizontal paging. While swiping, the time gutter also overlaps the previous day's event card (card text cut at the gutter edge). Acceptance: real iPhone-size WebKit capture mid-swipe and at rest; reduced motion respected.
Author
Owner

Starting the Calendar swipe investigation in job/mchrome-1084 at 269b1b51b (origin/dev / production). I will trace the Tab Bar blur stacking and the Day view horizontal track, then capture during-swipe and resting states.

Starting the Calendar swipe investigation in job/mchrome-1084 at 269b1b51b (origin/dev / production). I will trace the Tab Bar blur stacking and the Day view horizontal track, then capture during-swipe and resting states.
Author
Owner

Finding: the horizontal Calendar paint rule disables every ProgressiveBlur span, including the fixed Tab Bar stack. During the same gesture, the hour gutter keeps its 20% wash while the day lane translates. I am keeping the shell Tab Bar blur live, giving the moving lane an explicit clip, and using the shared static chrome fill behind hour labels.

Finding: the horizontal Calendar paint rule disables every ProgressiveBlur span, including the fixed Tab Bar stack. During the same gesture, the hour gutter keeps its 20% wash while the day lane translates. I am keeping the shell Tab Bar blur live, giving the moving lane an explicit clip, and using the shared static chrome fill behind hour labels.
Author
Owner

Final report

Implemented with job/mchrome-1084 from dev at 269b1b51b. Head: 689069950b89b02768ea19c203e452184f16478d.

During Calendar horizontal movement, the Tab Bar keeps its progressive blur. The moving day lane is clipped and the time gutter paints the opaque shared --surface role, which prevents the translated card from showing through. Resting chrome is unchanged.

The locked perf-VM profile used real wheel and touch gestures with 650 Daily notes and 7,200 Logs. At 820 and 1440 px, 10-day gestures measured frame p95 from 33.4 to 66.7 ms. The 1440 px, 60-day wheel run measured p50/p95 50.0 / 133.3 ms, CPU 11.64 s, RSS 808 → 910 MiB, and 16 long tasks (longest 271 ms). Its existing 50 ms p95 guard failed. The baseline server SHA differs, so it does not establish a regression from this change. I reported the measurements and limitation on existing #1026.

Production WebKit screenshots cover Agenda and Day at rest and during horizontal movement, on macOS platform emulation, at 390, 430, 820 and 1440 px in light and dark. The calendar-day-mid-swipe screenshots capture the state marker after it was enabled; headless WebKit stalled painting the large virtual Day track during a true movement capture. The locked Chrome run above did perform real gestures.

Capture Before After
calendar-agenda-1440-dark before after
calendar-agenda-1440-light before after
calendar-agenda-390-dark before after
calendar-agenda-390-light before after
calendar-agenda-430-dark before after
calendar-agenda-430-light before after
calendar-agenda-820-dark before after
calendar-agenda-820-light before after
calendar-day-mid-swipe-1440-dark before after
calendar-day-mid-swipe-1440-light before after
calendar-day-mid-swipe-390-dark before after
calendar-day-mid-swipe-390-light before after
calendar-day-mid-swipe-430-dark before after
calendar-day-mid-swipe-430-light before after
calendar-day-mid-swipe-820-dark before after
calendar-day-mid-swipe-820-light before after
calendar-day-rest-1440-dark before after
calendar-day-rest-1440-light before after
calendar-day-rest-390-dark before after
calendar-day-rest-390-light before after
calendar-day-rest-430-dark before after
calendar-day-rest-430-light before after
calendar-day-rest-820-dark before after
calendar-day-rest-820-light before after

Focused web checks passed. No Rust code changed. The perf guard finding is tracked on #1026; performance is not a merge gate. READY FOR MERGE: yes.

## Final report Implemented with `job/mchrome-1084` from `dev` at `269b1b51b`. Head: `689069950b89b02768ea19c203e452184f16478d`. During Calendar horizontal movement, the Tab Bar keeps its progressive blur. The moving day lane is clipped and the time gutter paints the opaque shared `--surface` role, which prevents the translated card from showing through. Resting chrome is unchanged. The locked perf-VM profile used real wheel and touch gestures with 650 Daily notes and 7,200 Logs. At 820 and 1440 px, 10-day gestures measured frame p95 from `33.4` to `66.7 ms`. The 1440 px, 60-day wheel run measured p50/p95 `50.0 / 133.3 ms`, CPU `11.64 s`, RSS `808 → 910 MiB`, and 16 long tasks (longest `271 ms`). Its existing 50 ms p95 guard failed. The baseline server SHA differs, so it does not establish a regression from this change. I reported the measurements and limitation on existing #1026. Production WebKit screenshots cover Agenda and Day at rest and during horizontal movement, on macOS platform emulation, at 390, 430, 820 and 1440 px in light and dark. The `calendar-day-mid-swipe` screenshots capture the state marker after it was enabled; headless WebKit stalled painting the large virtual Day track during a true movement capture. The locked Chrome run above did perform real gestures. | Capture | Before | After | | --- | --- | --- | | `calendar-agenda-1440-dark` | [before](https://git.kayg.org/attachments/ca6e8a9f-94ac-407c-bf27-bd416b0e74f4) | [after](https://git.kayg.org/attachments/4268285e-3ecf-4f78-b98b-16edec9a8876) | | `calendar-agenda-1440-light` | [before](https://git.kayg.org/attachments/f18bce7f-6ac2-415e-8a12-4cd353494853) | [after](https://git.kayg.org/attachments/0d0f1680-7687-4a0b-9895-c8eaaa1e7287) | | `calendar-agenda-390-dark` | [before](https://git.kayg.org/attachments/d2776d4e-a3d0-4fb1-aff8-b7223e5d7c8a) | [after](https://git.kayg.org/attachments/940fd4ff-f483-4de9-ba22-15bc3bce08d4) | | `calendar-agenda-390-light` | [before](https://git.kayg.org/attachments/d80239a9-8967-4e19-90a5-6aced9cc031e) | [after](https://git.kayg.org/attachments/6277c96d-2af4-4cfe-a7de-fd49289d0957) | | `calendar-agenda-430-dark` | [before](https://git.kayg.org/attachments/4af4ae30-17c7-446c-b4bf-7282c43a60a6) | [after](https://git.kayg.org/attachments/7ca03c43-4114-49ba-9cb5-b392f08726db) | | `calendar-agenda-430-light` | [before](https://git.kayg.org/attachments/d581bec3-a770-43d2-b844-e4bc85105b7d) | [after](https://git.kayg.org/attachments/2ef5c4fb-a452-4942-beb8-ec70dc69ebd8) | | `calendar-agenda-820-dark` | [before](https://git.kayg.org/attachments/bb1e6b30-d19a-4f83-81b8-afa6376febb9) | [after](https://git.kayg.org/attachments/5a66c18c-60de-4f0f-a53b-1d03de9a9dfa) | | `calendar-agenda-820-light` | [before](https://git.kayg.org/attachments/27fc375b-f559-427e-92d2-864cddbadb54) | [after](https://git.kayg.org/attachments/2c26b3fc-a123-406c-9fb8-bd43376b649b) | | `calendar-day-mid-swipe-1440-dark` | [before](https://git.kayg.org/attachments/25ee324e-f132-4512-afef-5ac3d7f6c6b3) | [after](https://git.kayg.org/attachments/2ea32fd8-73d3-4818-8bb3-d1b58b567bad) | | `calendar-day-mid-swipe-1440-light` | [before](https://git.kayg.org/attachments/aab492d6-1ec8-4d5b-9e6f-a6e623ea436f) | [after](https://git.kayg.org/attachments/b4d7567f-ded8-44bf-97e7-59ba2c1c2b74) | | `calendar-day-mid-swipe-390-dark` | [before](https://git.kayg.org/attachments/9523492b-9dfb-417a-8970-3965a44817ea) | [after](https://git.kayg.org/attachments/bcabcf65-85a1-484e-bb0f-35d56173b7c1) | | `calendar-day-mid-swipe-390-light` | [before](https://git.kayg.org/attachments/e2ba1b2c-431b-4738-9b77-2a212fa233cd) | [after](https://git.kayg.org/attachments/328906a1-5ce8-4215-904c-00fc6dbc84b5) | | `calendar-day-mid-swipe-430-dark` | [before](https://git.kayg.org/attachments/7b36bdf4-4fd7-4e9b-a9c8-474799f5fe3e) | [after](https://git.kayg.org/attachments/c0546c6f-456f-4937-ac45-91c843a56fe8) | | `calendar-day-mid-swipe-430-light` | [before](https://git.kayg.org/attachments/53ba9f7a-301d-4016-a98b-6166f2c762d6) | [after](https://git.kayg.org/attachments/feb4c63b-634f-4076-9282-36b328169364) | | `calendar-day-mid-swipe-820-dark` | [before](https://git.kayg.org/attachments/1c63c4e5-d797-415e-9d31-2c32c00c227d) | [after](https://git.kayg.org/attachments/b4b0ea26-cf5b-45bd-b7d5-32d5c0c85765) | | `calendar-day-mid-swipe-820-light` | [before](https://git.kayg.org/attachments/4031765c-9e88-4411-80c7-6868da91e523) | [after](https://git.kayg.org/attachments/de16df2e-0a1e-451e-8d49-6219e867a7b9) | | `calendar-day-rest-1440-dark` | [before](https://git.kayg.org/attachments/b3ccaaab-f4c8-43a2-927f-448b8b3f4bf7) | [after](https://git.kayg.org/attachments/1b8e677f-1301-4fd4-a8e7-9b7645ccd441) | | `calendar-day-rest-1440-light` | [before](https://git.kayg.org/attachments/488aea6f-90b9-46d2-968b-2ef435d6f731) | [after](https://git.kayg.org/attachments/c0321b6e-06ea-49c4-a722-9576091baaf5) | | `calendar-day-rest-390-dark` | [before](https://git.kayg.org/attachments/590e6b73-215c-4dd4-a8bc-b899d4cc122f) | [after](https://git.kayg.org/attachments/463b1183-c185-47d7-82a4-9d7015e93a1e) | | `calendar-day-rest-390-light` | [before](https://git.kayg.org/attachments/ecda02fd-0d26-4994-94c2-d0e18532227c) | [after](https://git.kayg.org/attachments/88a38723-fdc2-4140-a9e6-6bca6b71a6e8) | | `calendar-day-rest-430-dark` | [before](https://git.kayg.org/attachments/6669d944-182d-47a4-83c0-e43025e92a82) | [after](https://git.kayg.org/attachments/6a0ceb66-d130-4e25-a42e-7f953b943188) | | `calendar-day-rest-430-light` | [before](https://git.kayg.org/attachments/03cf9741-b7b7-4408-9a8b-af4943f52919) | [after](https://git.kayg.org/attachments/2107073f-c812-4f04-9062-93d949e42e19) | | `calendar-day-rest-820-dark` | [before](https://git.kayg.org/attachments/a393c3bd-3fce-416a-844b-edddae14e96c) | [after](https://git.kayg.org/attachments/512edc75-1667-4414-938f-dfab972be157) | | `calendar-day-rest-820-light` | [before](https://git.kayg.org/attachments/b5321521-17b0-4b5f-b37a-8c5379614bbd) | [after](https://git.kayg.org/attachments/cd098fe1-d551-44ab-9c47-4cec1afb1356) | Focused web checks passed. No Rust code changed. The perf guard finding is tracked on #1026; performance is not a merge gate. **READY FOR MERGE: yes.**
Author
Owner

Final report update

Final head: 4cae714b169302faebfe0030f72e8c24794d24d1 on job/mchrome-1084, based on dev at 269b1b51b. The prior report and screenshot matrix remain attached above. The final production WebKit matrix also passed after the shared Inspector group change; Calendar CSS and behavior did not change in that follow-up.

The known mid-swipe evidence gap remains: headless WebKit captures the real Calendar route with the scroll paint marker enabled but not a moving frame. The locked Chrome profile performed actual wheel and touch gestures and checked the live Tab Bar blur and opaque gutter. The 60-day p95 guard finding and unmatched server baseline are on #1026.

Final gates

bun run check:

perf-lint: PASS; 0 violations; 18996 scoped exceptions
User browser caches use userStorage; only documented device/public-link exceptions remain.
Glass alpha, blur and backdrop-filter roles use packages/ui/src/tokens.css.
Text sizes and UI shape values use shared role tokens.
Keyboard focus rings use the shared focus tokens.
UI transitions and animation options use shared motion tokens or documented exceptions.
svelte-check found 0 errors and 4 warnings in 3 files

Focused Vitest:

Test Files  2 passed (2)
      Tests  26 passed (26)

Production build:

Compressed 534 static variants; saved 9833416 bytes.

Production WebKit review (Mac platform emulation, 390/430/820/1440 px, light/dark):

PASS WebKit production review inspector-after: 4 widths × 2 themes

No Rust source changed, so Rust gates did not apply. cargo clean completed with Removed 0 files.

No Rust source changed. Performance is not a merge gate. READY FOR MERGE: yes.

## Final report update Final head: `4cae714b169302faebfe0030f72e8c24794d24d1` on `job/mchrome-1084`, based on `dev` at `269b1b51b`. The prior report and screenshot matrix remain attached above. The final production WebKit matrix also passed after the shared Inspector group change; Calendar CSS and behavior did not change in that follow-up. The known mid-swipe evidence gap remains: headless WebKit captures the real Calendar route with the scroll paint marker enabled but not a moving frame. The locked Chrome profile performed actual wheel and touch gestures and checked the live Tab Bar blur and opaque gutter. The 60-day p95 guard finding and unmatched server baseline are on #1026. ### Final gates `bun run check`: ```text perf-lint: PASS; 0 violations; 18996 scoped exceptions User browser caches use userStorage; only documented device/public-link exceptions remain. Glass alpha, blur and backdrop-filter roles use packages/ui/src/tokens.css. Text sizes and UI shape values use shared role tokens. Keyboard focus rings use the shared focus tokens. UI transitions and animation options use shared motion tokens or documented exceptions. svelte-check found 0 errors and 4 warnings in 3 files ``` Focused Vitest: ```text Test Files 2 passed (2) Tests 26 passed (26) ``` Production build: ```text Compressed 534 static variants; saved 9833416 bytes. ``` Production WebKit review (Mac platform emulation, 390/430/820/1440 px, light/dark): ```text PASS WebKit production review inspector-after: 4 widths × 2 themes ``` No Rust source changed, so Rust gates did not apply. `cargo clean` completed with `Removed 0 files`. No Rust source changed. Performance is not a merge gate. **READY FOR MERGE: yes.**
Author
Owner

Deployed to production 2026-10-05 09:42 CEST in fix batch 1 (d1b8371f5).

Deployed to production 2026-10-05 09:42 CEST in fix batch 1 (d1b8371f5).
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal#1082
No description provided.