javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +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

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

@ -79,24 +79,49 @@
* 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.
*
* -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.
*/
: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 {
@include position(null, null, null, -99999px);
@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-days-of-week,
:host(.show-month-and-year) .calendar-body,
:host(.show-month-and-year) .datetime-time {
@include position(null, null, null, -99999px);
position: absolute;
position: absolute;
/**
* Use visibility instead of
* opacity to ensure element
* cannot receive focus
*/
visibility: hidden;
pointer-events: none;
/**
* Use visibility instead of
* opacity to ensure element
* cannot receive focus
*/
visibility: hidden;
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),