From 6e9666046f5421601afd75f90ebab13740ff0953 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 12 Feb 2024 16:45:56 +0100 Subject: [PATCH] add workaround for SVG images without diemnsion properties on their root element --- CHANGELOG.md | 5 +++ src/components/Depiction/depiction.scss | 40 +++++++++++------ .../Depiction/stories/Depiction.stories.tsx | 2 + .../Depiction/stories/test-dimensionless.svg | 45 ++++++++++++++----- .../stories/test-dimensionless.tobase64.svg | 41 +++++++++++++++++ 5 files changed, 110 insertions(+), 23 deletions(-) create mode 100644 src/components/Depiction/stories/test-dimensionless.tobase64.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index fa3e5e83..7a8d5cfc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Fixed + +- `` + - images representing SVG without `width` property on their root element are displayed with a minimal forced dimension to prevent that they are hidden in some browsers + ## [23.4.1] - 2024-02-08 ### Fixed diff --git a/src/components/Depiction/depiction.scss b/src/components/Depiction/depiction.scss index 024dce33..f991fbd8 100644 --- a/src/components/Depiction/depiction.scss +++ b/src/components/Depiction/depiction.scss @@ -3,16 +3,14 @@ $eccgui-size-depiction-height-small: mini-units(6) !default; $eccgui-size-depiction-height-medium: mini-units(12) !default; $eccgui-size-depiction-height-large: mini-units(24) !default; $eccgui-size-depiction-height-xlarge: mini-units(48) !default; - $eccgui-color-depiction-background: $eccgui-color-workspace-text !default; $eccgui-color-depiction-text: $eccgui-color-workspace-background !default; $eccgui-size-depiction-border-radius: $pt-border-radius !default; - .#{$eccgui}-depiction { - max-width: 100%; - display: inline-flex; position: relative; + display: inline-flex; + max-width: 100%; .#{$eccgui}-overviewitem__item > & { flex-grow: 0; @@ -26,12 +24,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default; } .#{$eccgui}-depiction__image { - overflow: hidden; max-width: 100%; max-height: 100%; + overflow: hidden; border-radius: $eccgui-size-depiction-border-radius; - img, svg { + img, + svg { width: 100%; height: 100%; } @@ -57,10 +56,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default; .#{$eccgui}-depiction__image--ratio-source { aspect-ratio: auto; - img, svg { + img, + svg { max-width: 100%; max-height: 100%; } + + /** + * SVG images without width property on their SVG root are not (specific: using a width of 0px) displayed by some browsers (e.g. Firefox or Brave). + * This might be technically correct but to the user it looks like a bug and is not expected by them. + * We workaround this "problem" by adding minimal dimensions to images with an SVG source. + */ + img[src^="data:image/svg"], + img[src*=".svg"] { + min-width: $eccgui-size-depiction-height-tiny; + min-height: $eccgui-size-depiction-height-tiny; + } } .#{$eccgui}-depiction__image--ratio-1to1 { @@ -68,19 +79,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default; } .#{$eccgui}-depiction__image--contain-sizing { - img, svg { + img, + svg { object-fit: contain; } } .#{$eccgui}-depiction__image--cover-sizing { - img, svg { + img, + svg { object-fit: cover; } } .#{$eccgui}-depiction__image--stretch-sizing { - img, svg { + img, + svg { object-fit: fill; } } @@ -153,8 +167,8 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default; --#{$eccgui}-depiction-color: #{$eccgui-color-depiction-background}; } .#{$eccgui}-depiction__image--color-config { - background: var(--#{$eccgui}-depiction-background); color: var(--#{$eccgui}-depiction-color); + background: var(--#{$eccgui}-depiction-background); /* Lead to more problems, even with our Carbon icons, that it "heals" unknown SVGs @@ -166,11 +180,11 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default; } .#{$eccgui}-depiction__image--hasborder { - border: 1px solid currentColor; + border: 1px solid currentcolor; } .#{$eccgui}-depiction__caption--none, - .#{$eccgui}-depiction__caption--tooltip { +.#{$eccgui}-depiction__caption--tooltip { position: fixed; left: -5000rem; } diff --git a/src/components/Depiction/stories/Depiction.stories.tsx b/src/components/Depiction/stories/Depiction.stories.tsx index e973305d..bc5d13aa 100644 --- a/src/components/Depiction/stories/Depiction.stories.tsx +++ b/src/components/Depiction/stories/Depiction.stories.tsx @@ -14,6 +14,7 @@ import png16to9 from "./test-16to9.png"; import svg16to9 from "./test-16to9.svg"; import svg16to9base64 from "./test-16to9.tobase64.svg"; import svgDimensionless from "./test-dimensionless.svg"; +import svgDimensionlessBase64 from "./test-dimensionless.tobase64.svg"; const allIcons = new Map([ ...Object.keys(canonicalIcons).map((keyId) => { @@ -31,6 +32,7 @@ const exampleImages = { "SVG 16:9 as React element": , "SVG 9:16 as React element": , "SVG without known width/height dimensions": , + "SVG without known width/height as Base64": , "Test icon": , ...Object.fromEntries(allIcons), }; diff --git a/src/components/Depiction/stories/test-dimensionless.svg b/src/components/Depiction/stories/test-dimensionless.svg index c1a23626..74f51ec9 100644 --- a/src/components/Depiction/stories/test-dimensionless.svg +++ b/src/components/Depiction/stories/test-dimensionless.svg @@ -1,16 +1,41 @@ + + - - + + + + + + + dimensionless + diff --git a/src/components/Depiction/stories/test-dimensionless.tobase64.svg b/src/components/Depiction/stories/test-dimensionless.tobase64.svg new file mode 100644 index 00000000..74f51ec9 --- /dev/null +++ b/src/components/Depiction/stories/test-dimensionless.tobase64.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + dimensionless + +