Skip to content

Commit

Permalink
Add section to next/future/image docs about Known Browser Bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
styfle committed Aug 19, 2022
1 parent aacc0ce commit 1a26b18
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions docs/api-reference/next/future/image.md
Expand Up @@ -41,6 +41,15 @@ Compared to `next/image`, the new `next/future/image` component has the followin
- Removes `loader` config in favor of [`loader`](#loader) prop
- Note: the [`onError`](#onerror) prop might behave differently

## 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) } }`
- 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 progressive jpeg. Possible solutions:
- Enable [AVIF format](#acceptable-formats)
- Use [`placeholder="blur"](#blur)

## Migration

Although `layout` is not available, you can migrate `next/image` to `next/future/image` using a few props. The following code snippets compare the two components:
Expand Down

0 comments on commit 1a26b18

Please sign in to comment.