From e41b0e0cf2a794972d7f4d8943a0bec3d1e08016 Mon Sep 17 00:00:00 2001
From: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com>
Date: Wed, 1 Dec 2021 13:47:39 -0600
Subject: [PATCH] fix(content): ensure fixed slot renders on top of content in
 iOS (#24300)

---
 core/src/components/content/content.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index f341888456..59ce715d7a 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -199,4 +199,15 @@
 
 ::slotted([slot="fixed"]) {
   position: absolute;
+
+  /**
+   * When presenting ion-content inside of an ion-modal, the .inner-scroll
+   * element is composited. In WebKit, the fixed content is not composited
+   * causing it to appear under the main scrollable content as a result.
+   * The fixed content is correctly composited in other browsers. Adding
+   * the translateZ forces the fixed content to be composited so it correctly
+   * shows on top of the scrollable content. Setting a negative z-index will
+   * still allow the fixed content to appear under the scroll content if specified.
+   */
+  transform: translateZ(0);
 }