From 5c48edfce6d13a442670e5877f8dce6e7cbc8cd6 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 30 Apr 2024 14:35:41 +0300
Subject: [PATCH] fix(overlay): change how containers are hidden (#14182)

---
 .../components/overlay/_overlay-component.scss |  4 ++++
 .../components/overlay/_overlay-theme.scss     | 18 +++++++++++++++++-
 .../igniteui-angular/src/lib/core/utils.ts     |  2 ++
 .../lib/directives/toggle/toggle.directive.ts  | 14 ++++++++++++--
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss
index 498f869ee57..68525c6f0d2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss
@@ -56,5 +56,9 @@
         @include m(hidden) {
             @extend %igx-toggle--hidden !optional;
         }
+
+        @include m(hidden-webkit) {
+            @extend %igx-toggle--hidden-webkit !optional;
+        }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
index ad863a65533..689fe58b45b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
@@ -94,7 +94,23 @@
         position: relative;
     }
 
-    %igx-toggle--hidden {
+    %igx-toggle--hidden:not(%igx-toggle--hidden-webkit) {
         display: none !important;
     }
+
+    %igx-toggle--hidden-webkit {
+        // WARN: This is a workaround around a bug in Safari.
+        position: absolute;
+        visibility: hidden;
+        top: 0;
+        left: 0;
+        margin: -1px;
+        border: none;
+        clip: rect(0, 0, 0, 0);
+        outline: 0;
+        pointer-events: none;
+        overflow: hidden;
+        appearance: none;
+        z-index: -1;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
index 30d6648d285..c928eb0aa7b 100644
--- a/projects/igniteui-angular/src/lib/core/utils.ts
+++ b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -245,10 +245,12 @@ export const isEqual = (obj1, obj2): boolean => {
 export class PlatformUtil {
     public isBrowser: boolean = isPlatformBrowser(this.platformId);
     public isIOS = this.isBrowser && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+    public isSafari = this.isBrowser && /Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent);
     public isFirefox = this.isBrowser && /Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent);
     public isEdge = this.isBrowser && /Edge[\/\s](\d+\.\d+)/.test(navigator.userAgent);
     public isChromium = this.isBrowser && (/Chrom|e?ium/g.test(navigator.userAgent) ||
         /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
+    public browserVersion = this.isBrowser ? parseFloat(navigator.userAgent.match(/Version\/([\d.]+)/)?.at(1)) : 0;
 
     public KEYMAP = mkenum({
         ENTER: 'Enter',
diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
index 7fc2ab172ae..54ab9f514c8 100644
--- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts
@@ -13,7 +13,7 @@ import {
     Output
 } from '@angular/core';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
-import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
+import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy';
 import { filter, first, takeUntil } from 'rxjs/operators';
 import { IgxNavigationService, IToggleView } from '../../core/navigation';
@@ -164,6 +164,14 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         return this.collapsed;
     }
 
+    @HostBinding('class.igx-toggle--hidden-webkit')
+    public get hiddenWebkitClass() {
+        const isSafari = this.platform?.isSafari;
+        const browserVersion = this.platform?.browserVersion;
+
+        return this.collapsed && isSafari && !!browserVersion && browserVersion < 17.5;
+    }
+
     /**
      * @hidden
      */
@@ -192,7 +200,9 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         private elementRef: ElementRef,
         private cdr: ChangeDetectorRef,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
-        @Optional() private navigationService: IgxNavigationService) {
+        @Optional() private navigationService: IgxNavigationService,
+        @Optional() private platform?: PlatformUtil
+    ) {
     }
 
     /**