Add section to next/future/image
docs about Known Browser Bugs (#39759)
This PR adds section to `next/future/image` docs about Known Browser Bugs. This also includes workarounds that might vary depending on the image and how the user plans to use it.
This commit is contained in:
parent
aacc0ce90f
commit
5b6631a5c9
2 changed files with 11 additions and 1 deletions
3
.alexrc
3
.alexrc
|
@ -17,6 +17,7 @@
|
||||||
"hooks",
|
"hooks",
|
||||||
"host-hostess",
|
"host-hostess",
|
||||||
"invalid",
|
"invalid",
|
||||||
"remains"
|
"remains",
|
||||||
|
"white"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
- Removes `loader` config in favor of [`loader`](#loader) prop
|
||||||
- Note: the [`onError`](#onerror) prop might behave differently
|
- 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 `formats`](#acceptable-formats)
|
||||||
|
- Use [`placeholder="blur"`](#blur)
|
||||||
|
|
||||||
## Migration
|
## 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:
|
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:
|
||||||
|
|
Loading…
Reference in a new issue