From 47ab61cb4c8e8048ae4092d9a420d8a47e1124e2 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 24 Oct 2022 18:30:02 +0000
Subject: [PATCH] removes default content-visibility styles from image
 components (#5180)

---
 .changeset/chilly-experts-add.md                     | 9 +++++++++
 packages/integrations/image/components/Image.astro   | 6 ------
 packages/integrations/image/components/Picture.astro | 6 ------
 3 files changed, 9 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/chilly-experts-add.md

diff --git a/.changeset/chilly-experts-add.md b/.changeset/chilly-experts-add.md
new file mode 100644
index 000000000000..46c228c7d176
--- /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 578db702d401..254d24777dc4 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 7cd71d6004a5..c9633c3ded8c 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>