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 <steven@ceriously.com>

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)