Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 00:09:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: use conic-gradient for image preview transparency checkerboard

Browse Source 
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
This commit is contained in:
yogeshwaran-c
2026-03-26 06:11:00 +05:30
parent c2e1f3bef2
commit 451b858997
1 changed files with 2 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
extensions/media-preview/media/imagePreview.css
View File

@@ -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 {