garris / garris/BackstopJS

Use img { image-rendering: pixelated }

Open
#1,097 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

Chrome automatically applies smoothing when drawing images to screen when in retina mode while the image was captured non-retina.

Since backstop's goal is to compare images, the smoothing is counterproductive. I am not seeing what the browser actually rendered - I get a blurred version instead.

The `img { image-rendering: pixelated }` style makes the image comparison render much crisper.

I am currently applying this style in DevTools, but I figure this could be done automatically by backstop.js.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.