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 3 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
24 changes: 22 additions & 2 deletions docs/api-reference/next/image.md
View file
Open in desktop
Expand Up @@ -40,9 +40,29 @@ 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

```
/* Safari v10.1 to v15.6 */
@media not all and (min-resolution: 0.001dpcm) {
img[loading="lazy"] {
clip-path: inset(0.5px);
}
}
/* Safari v16.0+ */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we target both safari 15 and 16 with a single media query?

Copy link
Contributor Author

@alantoa alantoa Nov 29, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using:

@media (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {

  }
}

media query should work but would make the example less clear I think.
write this doc just to explain to developers, because in fact, developers still need to change it, such as 0.5px maybe need to change 1px.

WDYT?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 1px will be too much and make the image look smaller in Safari. We want this value to be the smallest possible change to the page while still removing the border.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

got it! thank you!
anyway, is a good way to fix this!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed to 0.6px 👍

@media (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
img[loading="lazy"] {
clip-path: inset(0.5px);
}
}
}
```

- 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