From 52fe65dc56a7cd3b81f06b5f536c4224d5f98ded Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 15 Feb 2022 17:53:36 +0000 Subject: [PATCH 1/3] fix(react, vue): scroll is no longer interrupted on ios --- core/src/css/structure.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index eeb225e79e7..1b820dd53d4 100644 --- a/core/src/css/structure.scss +++ b/core/src/css/structure.scss @@ -61,4 +61,22 @@ body { overscroll-behavior-y: none; text-size-adjust: none; + + /** + * WebKit does not always promote + * the body to its own layer on page + * load in Ionic apps. Once scrolling on + * ion-content starts, WebKit will promote + * body. Unfortunately, this causes a re-paint + * which results in scrolling being halted + * until the next user gesture. + * + * This impacts the Custom Elements build. + * The lazy loaded build causes the browser to + * re-paint during hydration which causes WebKit + * to promote body to its own layer. + * In the CE Build, this hydration does not + * happen, so the additional re-paint does not occur. + */ + transform: translateZ(0); } From 8960253a91bfb2356fecaa825169be98a0985bc5 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 15 Feb 2022 17:57:17 +0000 Subject: [PATCH 2/3] chore(): add more comments --- core/src/css/structure.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index 1b820dd53d4..e87d29ed246 100644 --- a/core/src/css/structure.scss +++ b/core/src/css/structure.scss @@ -63,6 +63,10 @@ body { text-size-adjust: none; /** + * Because body has position: fixed, + * it should be promoted to its own + * layer. + * * WebKit does not always promote * the body to its own layer on page * load in Ionic apps. Once scrolling on From 9bff742ea352a6f82ba7d59891bb40c19cd5c670 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 15 Feb 2022 18:01:54 +0000 Subject: [PATCH 3/3] chore(): lint --- core/src/css/structure.scss | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/core/src/css/structure.scss b/core/src/css/structure.scss index e87d29ed246..53c134d9b96 100644 --- a/core/src/css/structure.scss +++ b/core/src/css/structure.scss @@ -46,22 +46,6 @@ body { height: 100%; max-height: 100%; - text-rendering: optimizeLegibility; - - overflow: hidden; - - touch-action: manipulation; - - -webkit-user-drag: none; - - -ms-content-zooming: none; - - word-wrap: break-word; - - overscroll-behavior-y: none; - - text-size-adjust: none; - /** * Because body has position: fixed, * it should be promoted to its own @@ -83,4 +67,20 @@ body { * happen, so the additional re-paint does not occur. */ transform: translateZ(0); + + text-rendering: optimizeLegibility; + + overflow: hidden; + + touch-action: manipulation; + + -webkit-user-drag: none; + + -ms-content-zooming: none; + + word-wrap: break-word; + + overscroll-behavior-y: none; + + text-size-adjust: none; }