Blurry images

[kuubeu]

Summary

When using 100% display scaling on non-retina screens, images included on the website appear blurry — they inherit the size of the actual image, but are then pushed in by the border around them, making them no longer pixel-aligned. This is caused by box-sizing: border-box being applied to the images.

URL

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
(This is where I encountered the issue, but it's present on all articles which include images)

Reproduction steps

1. Go to an article containing an image, make sure your scaling and page zoom are set to 100%
2. Look at the image
3. It's blurry

Expected behavior

The borders around images should go outside, preserving the original size of the image and making it align with screen pixels.

Actual behavior

The borders around images go inside the image container, scaling it down ever so slightly and causing images to look blurry.

Device

Desktop

Browser

Chrome, Firefox, Gnome Web

Browser version

Stable

Operating system

Windows, Linux, ChromeOS

Screenshot

Current behavior:

Expected behavior:

Anything else?

Note: this increases the size of <img> elements by 1px in each direction.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.