diff --git a/core/src/components/datetime/datetime.common.scss b/core/src/components/datetime/datetime.common.scss
index a7532c41420..97730fa9eb6 100644
--- a/core/src/components/datetime/datetime.common.scss
+++ b/core/src/components/datetime/datetime.common.scss
@@ -25,24 +25,13 @@
   width: 100%;
 }
 
-:host .calendar-body,
-:host .datetime-year {
-  opacity: 0;
-}
-
 :host(:not(.datetime-ready)) .datetime-year {
   position: absolute;
   pointer-events: none;
 }
 
-:host(.datetime-ready) .calendar-body {
-  opacity: 1;
-}
-
 :host(.datetime-ready) .datetime-year {
   display: none;
-
-  opacity: 1;
 }
 
 /**
diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss
index 82f447f1a54..e1411eacb8b 100644
--- a/core/src/components/datetime/datetime.ionic.scss
+++ b/core/src/components/datetime/datetime.ionic.scss
@@ -12,6 +12,30 @@
   --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
+  /**
+   * TODO(FW-6931): Remove these variables upon solving the root cause
+   */
+  --body-opacity: 0;
+  --year-opacity: 0;
+}
+
+/**
+   * TODO(FW-6931): Remove all this css related to opacity upon solving the root cause
+   */
+:host .calendar-body {
+  opacity: var(--body-opacity);
+}
+
+:host .datetime-year {
+  opacity: var(--year-opacity);
+}
+
+:host(.datetime-ready) .calendar-body {
+  --body-opacity: 1;
+}
+
+:host(.datetime-ready) .datetime-year {
+  --year-opacity: 1;
 }
 
 // Header
diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss
index eee452f1076..e000e207057 100644
--- a/core/src/components/datetime/datetime.native.scss
+++ b/core/src/components/datetime/datetime.native.scss
@@ -23,6 +23,22 @@
   max-width: 350px;
 }
 
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host .calendar-body,
+:host .datetime-year {
+  opacity: 0;
+}
+
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host(.datetime-ready) .calendar-body,
+:host(.datetime-ready) .datetime-year {
+  opacity: 1;
+}
+
 /**
  * This ensures that the picker is appropriately
  * sized and never truncates the text.
diff --git a/core/src/components/header/header.ionic.scss b/core/src/components/header/header.ionic.scss
index 0a216726a77..75911184988 100644
--- a/core/src/components/header/header.ionic.scss
+++ b/core/src/components/header/header.ionic.scss
@@ -8,7 +8,7 @@ ion-header {
   z-index: 10; // TODO(ROU-10853): replace this value with a layer token.
 
   &.header-divider {
-    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
+    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
   }
 }