fix(overlay): change how containers are hidden (#14167)

Author: simeonoff

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;
+        }
     }
 }

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;
+    }
 }

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',

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
+    ) {
     }
 
     /**