From fb723f0af89cf5c8331fdf037f03d3d5e2eabd84 Mon Sep 17 00:00:00 2001 From: Donkie Date: Tue, 11 Aug 2026 22:35:15 +0200 Subject: [PATCH] client_v2: stop the alpha slider tiling colour under its border MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A `background` shorthand resets background-origin to the padding box, so the slider's gradient was sized to the padding box but painted out under its 1px border — and backgrounds repeat, so the strip under the border showed the far edge of the next tile: a hairline of full-opacity colour down the transparent end. It surfaced wherever the border doesn't cover that strip exactly, i.e. Firefox at fractional display scaling. Anchor every layer to the border box, and keep the colour gradient from repeating at all. --- client_v2/src/lib/components/ColorEditor.svelte | 4 +++- client_v2/src/lib/utils/color.ts | 10 +++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/client_v2/src/lib/components/ColorEditor.svelte b/client_v2/src/lib/components/ColorEditor.svelte index cb2206b6..67b173bc 100644 --- a/client_v2/src/lib/components/ColorEditor.svelte +++ b/client_v2/src/lib/components/ColorEditor.svelte @@ -96,9 +96,11 @@ } // Transparent-to-opaque gradient over a checkerboard, so the slider previews // what it controls. Falls back to grey until the row holds a real colour. + // `border-box no-repeat` keeps the gradient from tiling a hairline of full + // colour under the border at the transparent end — see ALPHA_CHECKER. function alphaTrack(h: string): string { const rgb = normalizeHex(h)?.slice(0, 6) ?? '9AA0A6'; - return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF),${ALPHA_CHECKER}`; + return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF) border-box no-repeat,${ALPHA_CHECKER}`; } function addColor() { list.push(''); diff --git a/client_v2/src/lib/utils/color.ts b/client_v2/src/lib/utils/color.ts index 5c10e5d5..dc1b3338 100644 --- a/client_v2/src/lib/utils/color.ts +++ b/client_v2/src/lib/utils/color.ts @@ -45,9 +45,17 @@ export function withAlpha(h: string, alpha: number): string { * transparent instead of as a different color. Deliberately theme-independent * (the usual white/grey of every color picker) and composited over white, which * also previews how the filament looks against a printed label. + * + * Every layer is anchored to the border box. A `background` shorthand resets + * `background-origin` to the padding box, so on a bordered element the layers + * would be sized to the padding box but painted out under the border — and + * since backgrounds repeat, the strip under the border shows the far edge of + * the next tile. On a colour gradient that is a hairline of full-opacity colour + * down the transparent end, visible wherever the border doesn't perfectly cover + * it (Firefox at fractional display scaling). */ export const ALPHA_CHECKER = - 'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px, #fff'; + 'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px border-box, #fff'; export function hexRgb(h: string): [number, number, number] { let s = (h || '#888').replace('#', '');