mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
chore(datetime): remove safari 14 intersection observer workaround (#29032)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Ionic Framework has a patch implementation to workaround a Safari 14 bug that resulted in the calendar month jumping when opening/closing the month/year interface. This bug was fixed in Safari 15. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Ionic v8 no longer supports Safari 14, so we can safely remove this patch code - Calendar month does not jump when opening/closing the month/year interface with Safari/iOS 15-17 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> I tested on Sims for iOS 15-17. Tested against a physical device for iOS 17 as well.
This commit is contained in:
@ -120,54 +120,11 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safari 14 has an issue where a scroll event
|
||||
* is incorrectly fired when unhiding the calendar content.
|
||||
* To workaround this, we set the opacity
|
||||
* of the content to 0 and hide it offscreen.
|
||||
*
|
||||
* -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-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;
|
||||
|
||||
/**
|
||||
* 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(.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(.month-year-picker-open) .datetime-footer {
|
||||
|
||||
Reference in New Issue
Block a user