fix(reader): texture the scrolled-mode top inset mask - #4563
Merged
Conversation
In scrolled mode the notch-area masks the top safe-area inset with opaque bg-base-100 so content scrolling under the status bar is hidden, but it painted over the background texture (.foliate-viewer::before at the z-0 layer), leaving a flat untextured strip across the unsafe header area. Give the mask its own texture ::before (.notch-masked in textures.ts) and make the element span the grid cell, clipped down to the inset strip with clip-path — background-size cover/contain resolves against the element box, so the full-cell box is what keeps the mask's tiles aligned with the viewer's at the seam. clip-path also clips hit-testing, so the click target stays the inset strip only. Verified on a Xiaomi 13: the strip now renders the texture with a pixel-continuous seam (row-to-row MAE at the boundary dropped from 11913 to 230, the level of ordinary texture rows), and elementsFromPoint confirms the notch is hit-testable only inside the strip. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dalzyu
added a commit
to dalzyu/readest-hermes
that referenced
this pull request
Jun 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #4486
Problem
In scrolled mode with a background texture, the top safe-area (unsafe header) strip renders as a flat untextured block (reporter's screenshot, and reproduced on a Xiaomi 13):
The
notch-areadiv inSectionInfomasks the top inset with opaquebg-base-100atz-10so content scrolling under the status bar is hidden — but the texture paints at the z-0 layer (.foliate-viewer::before), so the mask occludes it.Fix
.notch-masked::beforeto the texture CSS instyles/textures.ts(gated to the scrolled-horizontal case via a conditional class, so the paginated/vertical transparent notch is untouched).inset-0) and clip its visible/hit area down to the inset strip withclip-path: inset(0 0 calc(100% - topInset) 0).background-size: cover/containresolves against the element box, so sharing the viewer's paint box is what keeps the mask's texture tiles aligned with.foliate-viewer::beforeat the seam.clip-pathalso clips hit-testing, so the click target stays the inset strip, exactly as before.mix-blend-mode: multiplyblends against the notch's own opaquebg-base-100inside its z-10 stacking context — identical color math to the viewer area below.Verification on a Xiaomi 13 (fuxi)
Drove the installed app over adb + CDP with scrolled mode + Leaves texture (
cover):elementsFromPoint: the notch is hit-testable inside the strip and absent from the stack mid-screen, so content taps are unaffected.Tests
SectionInfo.test.tsx: notch spans the cell, clips to the inset, and carriesnotch-maskedonly in scrolled horizontal mode (transparent notch in paginated/vertical stays untextured).textures.test.ts: mounted texture CSS covers.notch-masked::before.🤖 Generated with Claude Code