Next/future/image safari border fix make all lazy loaded images bordered

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 19.6.0: Mon Apr 18 21:50:40 PDT 2022; root:xnu-6153.141.62~1/RELEASE_X86_64
Binaries:
  Node: 16.15.0
  npm: 8.3.0
  Yarn: 3.2.1
  pnpm: 7.1.7
Relevant packages:
  next: 12.3.1-canary.2
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Safari 15.5

How are you deploying your application? (if relevant)

No response

Describe the Bug

I used next future image

<Image
    className="w-full h-auto"
    src={item.th}
    alt=""
    width={240}
    height={240}
    placeholder = "blur"
    blurDataURL ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP88R8AAvUB+VkkrXoAAAAASUVORK5CYII="
    quality={100}
  />

I used hack to fix border on Safari 15+ when images which use loading=“lazy” has white border while loading.

@media not all and (min-resolution:.001dpcm) {
  img[loading="lazy"] {
    clip-path: inset(0.5px);
  }
}

Now I see in Safari 15 and ALL images which not have priority have 0.5px transparent (white if light background and black if dark) aka border.

Expected Behavior

Expected behavior - css hack needed to be applied only for images in loading state. Without this css styles lazy loaded images shown correctly

Link to reproduction

https://codesandbox.io/p/github/7iomka/effector-react-form-flow/draft/sweet-goldberg?file=%2Fsrc%2Fapp%2Fui-provider%2Fapp-global-styles.tsx&selection=[{"endColumn"%3A11%2C"endLineNumber"%3A14%2C"startColumn"%3A11%2C"startLineNumber"%3A14}]

To Reproduce

Open Demo in Safari You can see white border on images loaded in thumbs carousel

You can disable fix from styles (src/app/ui-provider/app-global-styles.tsx) to show that this fix caused issue.

Of course, I can use priority, but, if my images is located below the fold, this is not a solution, and it can’t be applied to all images.

[alextes]

Built a code sandbox with the proposed workaround, still getting the borders in Safari.

Did anyone else find a workaround or able to spot what I did wrong?

https://codesandbox.io/p/sandbox/pensive-babbage-mfmhn2?file=%2Fpages%2Findex.tsx

https://user-images.githubusercontent.com/2011351/201447149-ab091cbc-aae7-4b79-8ea1-9f156eef5228.mov

[nandorojo]

I see the same border issue on Chrome for iOS for what it’s worth.