From 451b858997b45ff421f8585a202afc15827d6c32 Mon Sep 17 00:00:00 2001 From: yogeshwaran-c Date: Thu, 26 Mar 2026 06:11:00 +0530 Subject: [PATCH] fix: use conic-gradient for image preview transparency checkerboard The transparency checkerboard pattern in the image preview used two overlapping linear-gradient(45deg, ...) backgrounds with offset positions. At certain zoom levels, subpixel rendering caused visible triangular artifacts at the gradient boundaries. Replace with a single conic-gradient per theme, which creates a clean four-square checkerboard tile without diagonal edges, eliminating the rendering artifacts at all zoom levels. Closes #229565 --- extensions/media-preview/media/imagePreview.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/extensions/media-preview/media/imagePreview.css b/extensions/media-preview/media/imagePreview.css index 49a01b8d969..d6e9feedb2f 100644 --- a/extensions/media-preview/media/imagePreview.css +++ b/extensions/media-preview/media/imagePreview.css @@ -33,21 +33,16 @@ body img { .container.image img { padding: 0; - background-position: 0 0, 8px 8px; background-size: 16px 16px; border: 1px solid var(--vscode-imagePreview-border); } .container.image img { - background-image: - linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)), - linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)); + background-image: conic-gradient(rgb(230, 230, 230) 25%, transparent 25% 50%, rgb(230, 230, 230) 50% 75%, transparent 75%); } .vscode-dark.container.image img { - background-image: - linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)), - linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)); + background-image: conic-gradient(rgb(20, 20, 20) 25%, transparent 25% 50%, rgb(20, 20, 20) 50% 75%, transparent 75%); } .container img.pixelated {