Image Banner: set height explicitly to preserve scroll state in safari (

#3804)

libs/extensions/angular/image-banner/src/image-banner-height.directive.ts

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ResizeObserverService } from '@kirbydesign/designsystem/shared';
+
+/**
+ * @Description Temporary directive to ensure correct scroll position behavior on Safari.
+ *
+ * When navigating between stacked pages, scroll position is not correctly restored on Safari,
+ * when the nested kirby-card element uses containment and the host element does not have an explicit height.
+ */
+@Directive({
+  selector: `[kirbyImageBannerResize]`,
+})
+export class ImageBannerHeightDirective implements OnInit, OnDestroy {
+  private currentHeight: number = 0;
+  private host = inject(ElementRef);
+  private resizeObserverService = inject(ResizeObserverService);
+  private renderer = inject(Renderer2);
+
+  ngOnInit() {
+    this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));
+  }
+
+  ngOnDestroy() {
+    this.resizeObserverService.unobserve(this.host);
+  }
+
+  private setCardHeightOnHost(entry: ResizeObserverEntry) {
+    const hostElement = entry.target as HTMLElement;
+    const card = hostElement.querySelector('kirby-card');
+    const cardHeight = card?.getBoundingClientRect().height;
+
+    if (!hostElement || !cardHeight) return;
+    if (cardHeight === this.currentHeight) return;
+
+    this.currentHeight = cardHeight;
+    this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);
+  }
+}

libs/extensions/angular/image-banner/src/image-banner.component.scss

@@ -23,8 +23,6 @@ $container-query-breakpoint: 600px;
 
 :host {
   display: block;
-  container-name: banner;
-  container-type: inline-size;
 }
 
 :host(.none) {
@@ -71,6 +69,8 @@ $container-query-breakpoint: 600px;
 }
 
 kirby-card {
+  container-name: banner;
+  container-type: inline-size;
   height: 100%;
 }
 

libs/extensions/angular/image-banner/src/image-banner.component.ts

@@ -4,10 +4,12 @@ import { CardModule } from '@kirbydesign/designsystem/card';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 import { TranslationService } from '@kirbydesign/designsystem/shared';
+import { ImageBannerHeightDirective } from './image-banner-height.directive';
 
 @Component({
   selector: 'kirby-x-image-banner',
   imports: [CardModule, ButtonComponent, IconModule, CommonModule],
+  hostDirectives: [ImageBannerHeightDirective],
   templateUrl: './image-banner.component.html',
   styleUrl: './image-banner.component.scss',
 })

libs/extensions/angular/image-banner/src/index.ts

@@ -1 +1,2 @@
 export { ImageBannerComponent } from './image-banner.component';
+export { ImageBannerHeightDirective } from './image-banner-height.directive';