fix(datetime): use ResizeObserver to reliably detect visibility changes by ShaneK · Pull Request #30864 · ionic-team/ionic-framework

Issue number: resolves #30706


What is the current behavior?

When ion-datetime is rendered inside a modal or popover, it may appear invisible (opacity: 0) because the datetime-ready class is not applied. This occurs because IntersectionObserver doesn't reliably detect visibility changes in some browsers (particularly WebKit/Safari) when the datetime is inside an overlay that is presented after page load.

What is the new behavior?

The datetime now uses multiple strategies to reliably detect visibility:

  1. ResizeObserver - Detects when the element transitions between having dimensions (visible) and zero dimensions (hidden)
  2. Overlay event listeners - Listens for didPresent/didDismiss events when datetime is inside a modal or popover
  3. Polling fallback - Uses requestAnimationFrame-based polling for browsers where ResizeObserver doesn't fire reliably (WebKit)

The .intersection-tracker element has been removed as it's no longer needed.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Current dev build:

8.7.13-dev.11765560568.1a8772e8