From 1a26b184bb28d1a3f8e2766cab7a4312a1dc55ca Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 19 Aug 2022 19:47:06 +0100 Subject: [PATCH 1/3] Add section to `next/future/image` docs about Known Browser Bugs --- docs/api-reference/next/future/image.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index f7909d6bcec6..3ea2a345ee41 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -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: From afee9e035105a82b611bfdd9d1510df31156f508 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 19 Aug 2022 19:55:47 +0100 Subject: [PATCH 2/3] Fix typo --- docs/api-reference/next/future/image.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index 3ea2a345ee41..76e2ee33cddc 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -47,8 +47,8 @@ Compared to `next/image`, the new `next/future/image` component has the followin - 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) + - Enable [AVIF `formats`](#acceptable-formats) + - Use [`placeholder="blur"`](#blur) ## Migration From e2325332d3a6d7e2af7c2a008493f9279141e9c2 Mon Sep 17 00:00:00 2001 From: Steven Date: Sat, 20 Aug 2022 00:45:59 +0100 Subject: [PATCH 3/3] Add "white" to allow list --- .alexrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.alexrc b/.alexrc index 47862f2c80a1..1f1de4b4382a 100644 --- a/.alexrc +++ b/.alexrc @@ -17,6 +17,7 @@ "hooks", "host-hostess", "invalid", - "remains" + "remains", + "white" ] }