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

[7iomka]

Verify canary release

• [X] 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=%5B%7B%22endColumn%22%3A11%2C%22endLineNumber%22%3A14%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A14%7D%5D

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.

[7iomka]

Also I noticed, that you apply styles after image was loaded

• for priority image - inset: 0 in styles
• for rest images - inset: 0 is not present in styles

Why you don't added inset: 0 for all images after it was loaded? I think this is a key of issue for users that used proposed css fix

[styfle]

This is fixed in Safari Tech Preview 154

https://webkit.org/blog/13207/release-notes-for-safari-technology-preview-154/#:~:text=Stopped%20painting%20a%20border%20for%20images%20with%20loading%3D%22lazy%22%20before%20it%20loaded

https://developer.apple.com/safari/technology-preview/

[7iomka]

@styfle maybe, but how to figure out now?

[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

[nikkizol]

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

Did you find a solution?

[alextes]

@nikkizol the css was updated, see: https://nextjs.org/docs/api-reference/next/image#known-browser-bugs

[nandorojo]

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

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.