diff options
| -rw-r--r-- | .changeset/chilly-experts-add.md | 9 | ||||
| -rw-r--r-- | packages/integrations/image/components/Image.astro | 6 | ||||
| -rw-r--r-- | packages/integrations/image/components/Picture.astro | 6 |
3 files changed, 9 insertions, 12 deletions
diff --git a/.changeset/chilly-experts-add.md b/.changeset/chilly-experts-add.md new file mode 100644 index 000000000..46c228c7d --- /dev/null +++ b/.changeset/chilly-experts-add.md @@ -0,0 +1,9 @@ +--- +'@astrojs/image': minor +--- + +Removes the `content-visibility: auto` styling added by the `<Picture />` and `<Image />` components. + +**Why:** The [content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility) style is rarely needed for an `<img>` and can actually break certain layouts. + +**Migration:** Do images in your layout actually depend on `content-visibility`? No problem! You can add these styles where needed in your own component styles. diff --git a/packages/integrations/image/components/Image.astro b/packages/integrations/image/components/Image.astro index 578db702d..254d24777 100644 --- a/packages/integrations/image/components/Image.astro +++ b/packages/integrations/image/components/Image.astro @@ -34,9 +34,3 @@ const attrs = await getImage(props); --- <img {...attrs} {loading} {decoding} /> - -<style> - img { - content-visibility: auto; - } -</style> diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index 7cd71d600..c9633c3de 100644 --- a/packages/integrations/image/components/Picture.astro +++ b/packages/integrations/image/components/Picture.astro @@ -69,9 +69,3 @@ delete image.height; {sources.map((attrs) => <source {...attrs} {sizes} />)} <img {...image} {loading} {decoding} {alt} {...attrs} /> </picture> - -<style> - img { - content-visibility: auto; - } -</style> |