From b4cb1d1251d650b04b5dcde2612a3e933a9d0773 Mon Sep 17 00:00:00 2001 From: Luca Lucidera Date: Fri, 21 Aug 2026 12:19:10 +0200 Subject: [PATCH] fix(web): remove black seam at the topbar scroll fade boundary The timeline scroller masks its top edge with three mask layers: the fade gradient, a solid black rectangle for the rest of the viewport, and the opaque scrollbar lane. The gradient and the solid layer met at exactly --topbar-scroll-fade-height, and mask composition unions the layer alphas, so under fractional display scaling that shared edge can land on a half pixel where the gradient has ended and the solid layer has not yet begun. Both contribute zero alpha there, the row of content turns transparent and the dark window background shows through as a 1px black line cutting across the message text. Extend the gradient layer by 1px so it overlaps the solid layer. The extra pixel sits past the gradient's `black 100%` stop, so it stays fully opaque: the seam is now covered by both layers and the fade looks unchanged. --- apps/web/src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 71f9443f7f62..8ac131f9091e 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -361,7 +361,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil -webkit-mask-position: top, bottom, right; -webkit-mask-repeat: no-repeat; -webkit-mask-size: - 100% var(--topbar-scroll-fade-height), + 100% calc(var(--topbar-scroll-fade-height) + 1px), 100% calc(100% - var(--topbar-scroll-fade-height)), var(--app-scrollbar-width) 100%; mask-image: @@ -379,7 +379,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil mask-position: top, bottom, right; mask-repeat: no-repeat; mask-size: - 100% var(--topbar-scroll-fade-height), + 100% calc(var(--topbar-scroll-fade-height) + 1px), 100% calc(100% - var(--topbar-scroll-fade-height)), var(--app-scrollbar-width) 100%;