Transparent image grid isn't intuitive

[Tyriar]

I created this tiny file:

When I zoom in and out it looks like there are dark squares on the image since the grid scales with zoom:

It's much more clear if the transparency grid doesn't scale like this:

[dangerman]

I had a look into this and found that the transparency grid is a background-image on the actual image.

https://github.com/microsoft/vscode/blob/a754c044b52d29aa2028082a151940a9cc24bdd5/extensions/media-preview/media/imagePreview.css#L34-L45

Zooming uses the zoom property on the same image, which in turn seems to apply to the background image. I also tried using transform: scale() instead and this appears to behave the same.

As a fix, I tried putting the background into its own div around the image so it doesn't get scaled:

Light

https://github.com/user-attachments/assets/19695d9a-d3f9-4fee-876e-915403d99d1e

Dark:

https://github.com/user-attachments/assets/5caf924c-0bf8-40f3-b126-19146966abde

⚠️ Note:

I think we're supposed to be drawing a 1px border around the image, but the colour is --vscode-imagePreview-border which isn't defined anymore: https://github.com/microsoft/vscode/blob/main/extensions/media-preview/media/imagePreview.css#L38 A quick search suggests it was added in 2019: https://github.com/microsoft/vscode/pull/76387 and removed in 2021: https://github.com/microsoft/vscode/issues/122917 I might raise a separate issue for this.

[Tyriar]

@dangerman looks great to me, also 👍 from my side to bring back the border in a separate PR/issue.

[mjbvz]

Reopening as I need to revert the PR that fixed this as it caused some regressions

[dangerman]

Sorry about that! I'll take another look 🔎