fix(input-date-picker): calendar is displayed on open in Safari

packages/components/src/components/input-date-picker/input-date-picker.scss

@@ -65,6 +65,10 @@
   }
 }
 
+:host([composited-layer]) {
+  will-change: transform;
+}
+
 @function get-trailing-text-input-padding($chevron-spacing) {
   @return calc(var(--calcite-internal-date-picker-toggle-spacing) + $chevron-spacing);
 }

packages/components/src/components/input-date-picker/input-date-picker.tsx

@@ -73,6 +73,7 @@ import type { Input } from "../input/input";
 import { useSetFocus } from "../../controllers/useSetFocus";
 import { useInteractive } from "../../controllers/useInteractive";
 import { useTopLayer } from "../../controllers/useTopLayer";
+import { getUserAgentString } from "../../utils/browser";
 import { styles } from "./input-date-picker.scss";
 import { CSS, ICONS, IDS, POSITION } from "./resources";
 import T9nStrings from "./assets/t9n/messages.en.json";
@@ -196,6 +197,11 @@ export class InputDatePicker
 
   //#region Public Properties
 
+  /** When `range` is `true`, specifies the number of calendars displayed.
+   * @internal
+   */
+  @property({ reflect: true }) compositedLayer = false;
+
   /** When `range` is `true`, specifies the number of calendars displayed. */
   @property({ type: Number, reflect: true }) calendars: 1 | 2 = 2;
 
@@ -470,6 +476,10 @@ export class InputDatePicker
   }
 
   async load(): Promise<void> {
+    // Workaround for Safari issue https://github.com/Esri/calcite-design-system/issues/13795
+    // ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
+    this.compositedLayer = /safari/i.test(getUserAgentString());
+
     this.handleDateTimeFormatChange();
     await this.loadLocaleData();
     this.onMinChanged(this.min);