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:
Sean Perkins
2024-02-13 11:12:06 -05:00
committed by GitHub
parent 1543b0e608
commit e6e4c3e173

View File

@ -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 {