From 9f44966d8572a27d8296b38ae4f3e689c76c2e44 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 29 Oct 2020 16:41:20 -0400
Subject: [PATCH] perf(ios): move content to stacking context to improve
 scrolling performance on iOS devices (#22180)

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

diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index d51abac7b7..251e93f2f3 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -83,7 +83,24 @@
 .scroll-y,
 .scroll-x {
   -webkit-overflow-scrolling: touch;
-  will-change: scroll-position;
+
+  /**
+   * This adds `.inner-scroll` as part of the
+   * stacking context in WebKit. Without it,
+   * children of ion-content are treated as
+   * siblings rather than descendants. This
+   * can result in the children being put
+   * into their own layers, degrading
+   * scrolling performance.
+   *
+   * An optimization called "layer backing
+   * sharing" usually kicks in to prevent
+   * this, but having translate3d defeats
+   * this optimization.
+   *
+   * See: https://bugs.webkit.org/show_bug.cgi?id=216701
+   */
+  will-change: scroll-position, transform;
 }
 
 .scroll-y {