Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image preview transparency background is affected by scaling #141292

Closed
haykam821 opened this issue Jan 24, 2022 · 2 comments · Fixed by #141667
Closed

Image preview transparency background is affected by scaling #141292

haykam821 opened this issue Jan 24, 2022 · 2 comments · Fixed by #141667
Assignees
Labels
bug Issue identified by VS Code Team member as probable bug help wanted Issues identified as good community contribution opportunities insiders-released Patch has been released in VS Code Insiders verified Verification succeeded
Milestone

Comments

@haykam821
Copy link
Contributor

Most bitmap image editors, such as Paintbrush, use a checkered grid for transparency that matches the image size regardless of zoom:

Paintbrush transparent image

However, when zooming in on VS Code, the grid changes:

VS Code transparent image

VS Code transparent image zoomed

Ideally, the grid would align with the image's pixels and remain the same size when zooming in.

@mjbvz mjbvz added bug Issue identified by VS Code Team member as probable bug help wanted Issues identified as good community contribution opportunities labels Jan 25, 2022
@haykam821
Copy link
Contributor Author

This demo replicates Paintbrush's grid by using transform: scale() rather than adjusting the width attribute here:

image.style.minWidth = `${(image.naturalWidth * scale)}px`;
image.style.width = `${(image.naturalWidth * scale)}px`;

Would VS Code match this square size or use some other size?

@haykam821 haykam821 changed the title Transparency checkered grid should match image size Image preview transparency background is affected by scaling Jan 27, 2022
haykam821 added a commit to haykam821/vscode that referenced this issue Jan 27, 2022
@mjbvz mjbvz added this to the February 2022 milestone Feb 1, 2022
@roblourens roblourens added the verified Verification succeeded label Feb 24, 2022
@roblourens
Copy link
Member

Looks nice!

@github-actions github-actions bot locked and limited conversation to collaborators Mar 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue identified by VS Code Team member as probable bug help wanted Issues identified as good community contribution opportunities insiders-released Patch has been released in VS Code Insiders verified Verification succeeded
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants
@roblourens @mjbvz @haykam821 and others