peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): a scroller with no edge to fade carries no mask

Browse Source 
iPad WebKit kept a scrolled container's mask stuck to its content: at the
bottom of a scrolled page the last strip, a table's pager, sat under a dark
band. With nothing to fade there is no mask; isolation keeps its layer.
This commit is contained in:
peter
2026-10-08 02:43:58 +02:00
parent 1044eaf8a9
commit c9b8fe15a3
2 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/useScrollFade.ts
+6 -1
View File
@@ -18,7 +18,12 @@ export function useScrollFade(
style: CSSProperties;
} {
const { ref, start, end } = useScrollEdges("y");
const mask = `linear-gradient(to bottom, transparent, #000 ${start && fadeTop ? fadePx : 0}px, #000 calc(100% - ${
// No edge to fade, no mask at all: iPad WebKit kept a scrolled container's mask stuck to the
// content, so at the bottom of a scrolled page the last strip (a table's pager) sat under a dark
// band. `isolation` keeps the stacking context the mask made, so nothing inside changes layer.
const top = start && fadeTop;
if (!top && !end) return { ref, style: { isolation: "isolate" } };
const mask = `linear-gradient(to bottom, transparent, #000 ${top ? fadePx : 0}px, #000 calc(100% - ${
end ? fadePx : 0
}px), transparent)`;
return { ref, style: { maskImage: mask, WebkitMaskImage: mask } };