Transformation cause image getting blurry
radiocity opened this issue · 7 comments
image-rendering could help
Can you give me a demo link to reproduce this issue? Thanks.
This seems like an OS related issue, I cannot reproduce this on macOS:
Original:
Zoomed:
If you're not comfortable with the default CSS applied, you can always customize the appearance on your own:
img {
image-rendering: pixelated;
}Nope. After couple tests it became obvious that image-rendering doesn`t affect on thin lines.
Replace traslate3d with absolute positioning to prevent blurry effect
I can reproduce (and fix) this issue.
It appears that the translate3d property causes images to render blurry in Chrome and Safari (I haven't tested other browsers) when offsetting by a percentage of a pixel. Rounding to the nearest pixel fixes this issue completely.
Here's an example of the blurry (as-is currently) image:
Here's that same image with the translate3d property rounded off, and you'll notice if you open the image that the text on the image is considerably clearer:
I'm happy to submit a PR to fix this - let me know.
@sparanoid Can you fix that?
Sorry for the late reply, just fixed it and released a new version.