fix(datetime): improving detection logic

Author: ShaneK

core/src/components/datetime/datetime.scss

@@ -49,23 +49,6 @@
   width: 100%;
 }
 
-/**
- * The intersection tracker participates in layout so
- * IntersectionObserver has a non-zero rect to observe.
- * A negative margin keeps the effective host height
- * unchanged so pages embedding ion-datetime (such as
- * item input demos) do not grow by 1px.
- */
-:host .intersection-tracker {
-  width: 100%;
-  height: 1px;
-
-  margin-bottom: -1px;
-
-  opacity: 0;
-  pointer-events: none;
-}
-
 :host .calendar-body,
 :host .datetime-year {
   opacity: 0;

core/src/components/datetime/datetime.tsx

@@ -1171,15 +1171,11 @@ export class Datetime implements ComponentInterface {
      * datetime is visible but the host clearly has layout, ensure
      * we still initialize listeners and mark the component as ready.
      *
-     * We schedule this a couple of frames after load so that any
-     * initial layout/animations (such as a parent modal presenting)
-     * have had a chance to run.
+     * We schedule this after everything has had a chance to run.
      */
-    raf(() => {
-      raf(() => {
-        this.ensureReadyIfVisible();
-      });
-    });
+    setTimeout(() => {
+      this.ensureReadyIfVisible();
+    }, 100);
 
     /**
      * We need to clean up listeners when the datetime is hidden
@@ -2704,9 +2700,9 @@ export class Datetime implements ComponentInterface {
 
           We can work around this by observing .intersection-tracker and using the host
           (ion-datetime) as the "root". This allows the IO callback to fire the moment
-          the datetime is visible. The .intersection-tracker element uses a minimal,
-          invisible block size so it participates in layout, and it should not be
-          positioned absolutely otherwise the IO callback may fire at unexpected times.
+          the datetime is visible. The .intersection-tracker element should not have
+          dimensions or additional styles, and it should not be positioned absolutely
+          otherwise the IO callback may fire at unexpected times.
         */}
         <div class="intersection-tracker" ref={(el) => (this.intersectionTrackerRef = el)}></div>
         {this.renderDatetime(mode)}