From 27aef9343cada9a83adec8fe00e8bc3bafa8e049 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 2 Nov 2021 16:37:12 -0400 Subject: [PATCH] fix(datetime): resolve month and year jumping issue on ios (#24142) resolves #23910 --- core/src/components/datetime/datetime.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index a5ea17f4cd..974d576b14 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -73,11 +73,30 @@ display: flex; } +/** + * Safari 14 has an issue where Intersection + * Observer is incorrectly fired when + * unhiding the calendar content. + * To workaround this, we set the opacity + * of the content to 0 and hide it offscreen. + * TODO: This is fixed in Safari 15+, so remove + * when Safari 14 support is dropped. + */ :host(.show-month-and-year) .calendar-next-prev, :host(.show-month-and-year) .calendar-days-of-week, :host(.show-month-and-year) .calendar-body, :host(.show-month-and-year) .datetime-time { - display: none; + @include position(null, null, null, -99999px); + + position: absolute; + + /** + * Use visibility instead of + * opacity to ensure element + * cannot receive focus + */ + visibility: hidden; + pointer-events: none; } :host(.datetime-readonly),