[gatsby-plugin-image, sharp] Black border is added directly to an image

Description

A black border is added directly to an image. This happened also with other images, but the issue appeared, vanished and reappeared for two different images.

The file

The query

Amfori: file(relativePath: { eq: "amfori.png" }) {
      name
      childImageSharp {
        gatsbyImageData(
          width: 400
          placeholder: NONE
          formats: [WEBP, AVIF, AUTO]
          quality: 75
        )
      }
    }

The result

Thoughts

The issue seems to be related to the width image transform. If I change the width of the query slightly (f.e. by one px), the issue vanishes.

As an example, width: 400 causes the issue, width: 401 doesn’t. width: 402 doesn’t and width: 404 does again.

Possibly related

1. https://github.com/lovell/sharp/issues/1185
2. https://github.com/gatsbyjs/gatsby/issues/31488
3. https://github.com/libvips/libvips/issues/1476

Reproduction

I am working on a reproduction here: https://codesandbox.io/s/gatsby-issue-31792-reproduction-d4jyt

So far I haven’t been successfully able to reproduce the issue on codesandbox.

Environment

gatsby info:

  System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.1.0 - /usr/bin/node
    Yarn: 1.22.10 - ~/.npm-packages/bin/yarn
    npm: 7.12.1 - /usr/bin/npm
  Languages:
    Python: 3.9.5 - /usr/bin/python
  Browsers:
    Firefox: 89.0
  npmPackages:
    gatsby: ^3.6.2 => 3.6.2 
    gatsby-image: ^3.6.0 => 3.6.0 
    gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5 
    gatsby-plugin-anchor-links: ^1.2.1 => 1.2.1 
    gatsby-plugin-create-client-paths: ^3.6.0 => 3.6.0 
    gatsby-plugin-gdpr-cookies: ^2.0.0 => 2.0.0 
    gatsby-plugin-google-gtag: ^3.6.0 => 3.6.0 
    gatsby-plugin-image: ^1.6.0 => 1.6.0 
    gatsby-plugin-loadable-components-ssr: next => 2.2.1-beta.2 
    gatsby-plugin-manifest: ^3.6.0 => 3.6.0 
    gatsby-plugin-netlify: ^3.6.1 => 3.6.1 
    gatsby-plugin-netlify-headers: ^1.0.1 => 1.0.1 
    gatsby-plugin-offline: ^4.6.0 => 4.6.0 
    gatsby-plugin-perf-budgets: ^0.0.18 => 0.0.18 
    gatsby-plugin-postcss: ^4.6.0 => 4.6.0 
    gatsby-plugin-react-helmet: ^4.6.0 => 4.6.0 
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6 
    gatsby-plugin-sanity-image: ^0.6.0 => 0.6.0 
    gatsby-plugin-sass: ^4.6.0 => 4.6.0 
    gatsby-plugin-sharp: ^3.6.0 => 3.6.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.22 
    gatsby-source-filesystem: ^3.6.0 => 3.6.0 
    gatsby-source-sanity: ^7.0.4 => 7.0.4 
    gatsby-transformer-remark: ^4.3.0 => 4.3.0 
    gatsby-transformer-sharp: ^3.6.0 => 3.6.0 
  npmGlobalPackages:
    gatsby-cli: 3.6.0

Flags used: DEV_SSR

[vladar]

Sounds like another rounding/averaging case of sharp or libvips. Curious if it happens on any machine and any platform (mac, linux, windows)?

If not - then one blind idea that maybe sharp uses an outdated version of global libvips. In this case try:

rm -rf node_modules &&
SHARP_IGNORE_GLOBAL_LIBVIPS=true yarn

But if it happens regardless of the platform - then it should be reproduced and reported in sharp repository first.

[Hahlh]

Not stale.