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:
- ResizeObserver - Detects when the element transitions between having dimensions (visible) and zero dimensions (hidden)
- Overlay event listeners - Listens for didPresent/didDismiss events when datetime is inside a modal or popover
- 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