Use ruler element instead of host as container

kirbydesign · Feb 21, 2025 · 5cf6fa0 · 5cf6fa0
1 parent 9eb0fb1
commit 5cf6fa0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.html b/libs/extensions/angular/image-banner/src/image-banner.component.html
@@ -10,6 +10,8 @@
   <ng-container *ngTemplateOutlet="sharedCardContent"></ng-container>
 </kirby-card>
 
+<div aria-hidden="true" class="banner-ruler"></div>
+
 <ng-template #sharedCardContent>
   <div class="blur-image-wrapper">
     <img class="blur-image" [src]="imagePath" alt="" />

diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.scss b/libs/extensions/angular/image-banner/src/image-banner.component.scss
@@ -21,10 +21,13 @@ $container-query-breakpoint: 600px;
   }
 }
 
-:host {
-  display: block;
+// Container-type: inline-size currently causes block elements to collapse in curtain scenarios on Safari
+// To avoid content collapsing we use an empty block element as the container instead (we only need the inline size)
+.banner-ruler {
   container-name: banner;
   container-type: inline-size;
+  content: none;
+  visibility: hidden;
 }
 
 :host(.none) {