From 524f99221dd482d2b906bc0c9854c4d27f49bd3d Mon Sep 17 00:00:00 2001 From: Alan Toa <37520667+alantoa@users.noreply.github.com> Date: Wed, 30 Nov 2022 00:21:49 +0800 Subject: [PATCH] docs: update known Safari bug (#43513) # Why hey, teams! since Safari `v16` is supported [resolution media query](https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes), so this before docs the `@media not all and (min-resolution: 0.001dpcm)` media query will not work on Safari latest version. ![image](https://user-images.githubusercontent.com/37520667/204539236-a6206146-3519-45ab-b05e-dfb5481551ec.png) so I update the docs for `next/image` [Known Browser Bugs](https://nextjs.org/docs/api-reference/next/image#known-browser-bugs), hope this can help developers. ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` Co-authored-by: Steven --- docs/api-reference/next/image.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index b3cb2726751f..1572c4a061d7 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -40,8 +40,8 @@ This `next/image` component uses browser native [lazy loading](https://caniuse.c ## Known Browser Bugs -- [Safari 15](https://bugs.webkit.org/show_bug.cgi?id=243601) displays a gray border while loading. Possible solutions: - - Use CSS `@media not all and (min-resolution:.001dpcm) { img[loading="lazy"] { clip-path: inset(0.5px) } }` +- [Safari 15+](https://bugs.webkit.org/show_bug.cgi?id=243601) displays a gray border while loading. Possible solutions: + - Use CSS `@supports (font: -apple-system-body) and (-webkit-appearance: none) { img[loading="lazy"] { clip-path: inset(0.6px) } }` - Use [`priority`](#priority) if the image is above the fold - [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading. Possible solutions: - Enable [AVIF `formats`](#acceptable-formats)