fix(datetime): use ResizeObserver to reliably detect visibility changes

[ShaneK]

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Dec 12, 2025 5:20pm