From e6e4c3e173c951fe5894b8ccb0538c175338e303 Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:12:06 -0500
Subject: [PATCH] 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.
---
 core/src/components/datetime/datetime.scss | 53 ++--------------------
 1 file changed, 5 insertions(+), 48 deletions(-)

diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index f675a6608a..ede4c23a54 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -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 {