javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): showing calendar grid no longer causes month to switch on ios 15 (#24554)

Browse Source 
resolves #24405
This commit is contained in:
Liam DeBeasi
2022-01-12 10:24:29 -05:00
committed by GitHub
parent 88602a9acf
commit 3d20959221
1 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
core/src/components/datetime/datetime.scss
View File

@ -79,9 +79,16 @@
* unhiding the calendar content. * unhiding the calendar content.
* To workaround this, we set the opacity * To workaround this, we set the opacity
* of the content to 0 and hide it offscreen. * of the content to 0 and hide it offscreen.
* TODO: This is fixed in Safari 15+, so remove *
* when Safari 14 support is dropped. * -webkit-named-image is something only WebKit supports
* so we use this to detect general WebKit support.
* aspect-ratio is only supported in Safari 15+
* so by checking lack of aspect-ratio support, we know
* that we are in a pre-Safari 15 browser.
*
* TODO(FW-554): Remove when iOS 14 support is dropped.
*/ */
@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)) {
:host(.show-month-and-year) .calendar-next-prev, :host(.show-month-and-year) .calendar-next-prev,
:host(.show-month-and-year) .calendar-days-of-week, :host(.show-month-and-year) .calendar-days-of-week,
:host(.show-month-and-year) .calendar-body, :host(.show-month-and-year) .calendar-body,
@ -98,6 +105,24 @@
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
} }
}
/**
* This support check two cases:
* 1. A WebKit browser that supports aspect-ratio (Safari 15+)
* 2. Any non-WebKit browser.
* Note that just overriding this display: none is not
* sufficient to resolve the issue mentioned above, which
* is why we do another set of @supports checks.
*/
@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
: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;
}
}
:host(.datetime-readonly), :host(.datetime-readonly),
:host(.datetime-disabled) { :host(.datetime-disabled) {