Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: update known Safari bug #43513

Merged
merged 6 commits into from Nov 29, 2022
Merged

docs: update known Safari bug #43513

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5fcf7d7
docs: update know Safari bug
alantoa Nov 29, 2022
063a361
Merge branch 'canary' into canary
alantoa Nov 29, 2022
46ab561
Apply suggestions from code review
styfle Nov 29, 2022
aa49898
Improve css media query
styfle Nov 29, 2022
28f2f36
Remove whitespace
styfle Nov 29, 2022
3b50a1b
Change 0.5px to 0.6px
styfle Nov 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 23 additions & 2 deletions docs/api-reference/next/image.md
View file
Open in desktop
Expand Up @@ -40,9 +40,30 @@ 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

```
/* For Safari from v10.1 to v15.6 */
styfle marked this conversation as resolved.
Show resolved Hide resolved
@media not all and (min-resolution: 0.001dpcm) {
img[loading="lazy"] {
clip-path: inset(.5px);
styfle marked this conversation as resolved.
Show resolved Hide resolved
}
}
/* For Safari v16.0+ */
styfle marked this conversation as resolved.
Show resolved Hide resolved
@media (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
img[loading="lazy"] {
clip-path: inset(.5px);
styfle marked this conversation as resolved.
Show resolved Hide resolved
}
}
}

styfle marked this conversation as resolved.
Show resolved Hide resolved
```

- Use [`priority`](#priority) if the image is above the fold

styfle marked this conversation as resolved.
Show resolved Hide resolved
- [Firefox 67+](https://bugzilla.mozilla.org/show_bug.cgi?id=1556156) displays a white background while loading. Possible solutions:
- Enable [AVIF `formats`](#acceptable-formats)
- Use [`placeholder="blur"`](#placeholder)
Expand Down