From 5cf6fa0308cc9ee156ace9c114c1636727ab6b18 Mon Sep 17 00:00:00 2001
From: rth_bankdata <rth@bankdata.dk>
Date: Fri, 21 Feb 2025 15:45:58 +0100
Subject: [PATCH] Use ruler element instead of host as container

---
 .../angular/image-banner/src/image-banner.component.html   | 2 ++
 .../angular/image-banner/src/image-banner.component.scss   | 7 +++++--
 2 files changed, 7 insertions(+), 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
index 94c8d9cb39..db36514c24 100644
--- 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
index 64760b9c2c..ff8e74f24a 100644
--- 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) {