diff options
| author |  Tony Sullivan <tony.f.sullivan@outlook.com>
| 2022-10-24 18:30:02 +0000 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-10-24 18:30:02 +0000 |
| commit | b77200f42399ea31b0045bc0e6bfe2c1c5ccc970 (patch) | |
| tree | e09be6ae16ab9e622d471c80b6bddbeb94047044 | |
| parent | 308e565ad39957e3353d72ca5d3bbce1a1b45008 (diff) | |
| download | astro-b77200f42399ea31b0045bc0e6bfe2c1c5ccc970.tar.gz astro-b77200f42399ea31b0045bc0e6bfe2c1c5ccc970.tar.zst astro-b77200f42399ea31b0045bc0e6bfe2c1c5ccc970.zip | |
removes default content-visibility styles from image components (#5180)
| -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> |