Incorrect aspect ratios when using gatsby-remark-image #24212
Labels
help wanted
Issue with a clear description that the community can help with.
status: confirmed
Issue with steps to reproduce the bug that’s been verified by at least one reviewer.
topic: core
Relates to Gatsby's core (e.g. page loading, reporter, state machine)
topic: remark/mdx
Related to Markdown, remark & MDX ecosystem
type: bug
An issue or pull request relating to a bug in Gatsby
Projects
Description
Due to floating point precision error, or in some cases carried floating point precision errors, the paddingBottom "don't re-layout" trick sometimes results in an image that's a pixel off in height.
When displaying photos this isn't much of a problem, people won't notice, but displaying things like screenshots or graphics, that pixel difference can blur images noticeably.
Here's a difference map, it's just a 1px stretching, nothing amazing:
Instead of using:
We should probably use this?
In order to maintain precision?
However in my reproduction I just happened to use an image where both versions produce incorrect final image heights, off by a pixel.
It would probably be a breaking change to pass height and width to all the places where this trick is done, regardless?
Gatsby-image itself does this:
Object fit cover
This solves the visual blurriness problem, but the image is still off by a pixel in height, cut off.
I think
object-fit:cover;
should be added togatsby-remark-image
at a minimum, and hopefully some discussion can happen regarding the pixel-off problem.At the end of the day, these images are supposed to be responsive, if pixel perfect matching is required, the
fixed
query should be used notfluid
. That's fair enough.I can do PRs for whatever we decide to do.
Steps to reproduce
https://gatsby-blurry-image-repro.netlify.app/markdown
You can swap between the markdown and the regular page with the same screenshot.
https://github.com/Mike-Dax/gatsby-blurry-image-repro
Code available here.
Environment
Environment
The text was updated successfully, but these errors were encountered: