From 31c04867c17c5e1b6c90ef84869f06c8473b1dcb Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 21 Dec 2023 12:19:24 -0500 Subject: [PATCH 1/2] add notes for v8 --- docs/api/refresher.md | 22 +++++++++++++++++++ .../angular/example_component_css.md | 18 +++++++++++++++ .../refresher/custom-scroll-target/demo.html | 18 +++++++++++++++ .../custom-scroll-target/javascript.md | 18 +++++++++++++++ .../custom-scroll-target/react/main_css.md | 18 +++++++++++++++ .../v7/refresher/custom-scroll-target/vue.md | 18 +++++++++++++++ .../angular/example_component_css.md | 18 +++++++++++++++ .../refresher/custom-scroll-target/demo.html | 18 +++++++++++++++ .../custom-scroll-target/javascript.md | 18 +++++++++++++++ .../custom-scroll-target/react/main_css.md | 18 +++++++++++++++ .../v8/refresher/custom-scroll-target/vue.md | 18 +++++++++++++++ versioned_docs/version-v7/api/refresher.md | 22 +++++++++++++++++++ 12 files changed, 224 insertions(+) diff --git a/docs/api/refresher.md b/docs/api/refresher.md index d782bf14bfa..01d3680872f 100644 --- a/docs/api/refresher.md +++ b/docs/api/refresher.md @@ -67,6 +67,28 @@ The native refreshers can be disabled by setting the `pullingIcon` on the [refre Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. +Developers should apply the following CSS to the scrollable container. This CSS adds a "rubber band" scrolling effect on iOS which allows the native iOS refresher to work properly: + +```css +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} +``` + import CustomScrollTarget from '@site/static/usage/v8/refresher/custom-scroll-target/index.md'; diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md index 5fe74c95f50..b868a38923a 100644 --- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md +++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md @@ -7,4 +7,22 @@ width: 100%; overflow-y: auto; } + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} ``` diff --git a/static/usage/v7/refresher/custom-scroll-target/demo.html b/static/usage/v7/refresher/custom-scroll-target/demo.html index b52c58eb81f..0f9630c16d4 100644 --- a/static/usage/v7/refresher/custom-scroll-target/demo.html +++ b/static/usage/v7/refresher/custom-scroll-target/demo.html @@ -18,6 +18,24 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } diff --git a/static/usage/v7/refresher/custom-scroll-target/javascript.md b/static/usage/v7/refresher/custom-scroll-target/javascript.md index dde203612e4..aeba8487598 100644 --- a/static/usage/v7/refresher/custom-scroll-target/javascript.md +++ b/static/usage/v7/refresher/custom-scroll-target/javascript.md @@ -35,5 +35,23 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } ``` diff --git a/static/usage/v7/refresher/custom-scroll-target/react/main_css.md b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md index 5fe74c95f50..b868a38923a 100644 --- a/static/usage/v7/refresher/custom-scroll-target/react/main_css.md +++ b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md @@ -7,4 +7,22 @@ width: 100%; overflow-y: auto; } + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} ``` diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md index b63d979c827..7acb85d3500 100644 --- a/static/usage/v7/refresher/custom-scroll-target/vue.md +++ b/static/usage/v7/refresher/custom-scroll-target/vue.md @@ -45,5 +45,23 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } ``` diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md index 5fe74c95f50..b868a38923a 100644 --- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md @@ -7,4 +7,22 @@ width: 100%; overflow-y: auto; } + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} ``` diff --git a/static/usage/v8/refresher/custom-scroll-target/demo.html b/static/usage/v8/refresher/custom-scroll-target/demo.html index b52c58eb81f..0f9630c16d4 100644 --- a/static/usage/v8/refresher/custom-scroll-target/demo.html +++ b/static/usage/v8/refresher/custom-scroll-target/demo.html @@ -18,6 +18,24 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } diff --git a/static/usage/v8/refresher/custom-scroll-target/javascript.md b/static/usage/v8/refresher/custom-scroll-target/javascript.md index dde203612e4..aeba8487598 100644 --- a/static/usage/v8/refresher/custom-scroll-target/javascript.md +++ b/static/usage/v8/refresher/custom-scroll-target/javascript.md @@ -35,5 +35,23 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } ``` diff --git a/static/usage/v8/refresher/custom-scroll-target/react/main_css.md b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md index 5fe74c95f50..b868a38923a 100644 --- a/static/usage/v8/refresher/custom-scroll-target/react/main_css.md +++ b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md @@ -7,4 +7,22 @@ width: 100%; overflow-y: auto; } + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} ``` diff --git a/static/usage/v8/refresher/custom-scroll-target/vue.md b/static/usage/v8/refresher/custom-scroll-target/vue.md index b63d979c827..7acb85d3500 100644 --- a/static/usage/v8/refresher/custom-scroll-target/vue.md +++ b/static/usage/v8/refresher/custom-scroll-target/vue.md @@ -45,5 +45,23 @@ width: 100%; overflow-y: auto; } + + .ion-content-scroll-host::before, + .ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; + } + + .ion-content-scroll-host::before { + bottom: -1px; + } + + .ion-content-scroll-host::after { + top: -1px; + } ``` diff --git a/versioned_docs/version-v7/api/refresher.md b/versioned_docs/version-v7/api/refresher.md index 6aa273a68c6..120e2c6262b 100644 --- a/versioned_docs/version-v7/api/refresher.md +++ b/versioned_docs/version-v7/api/refresher.md @@ -65,6 +65,28 @@ The native refreshers can be disabled by setting the `pullingIcon` on the [refre Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. +Developers should apply the following CSS to the scrollable container. This CSS adds a "rubber band" scrolling effect on iOS which allows the native iOS refresher to work properly: + +```css +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ""; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} +``` + import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.md'; From d14b9156c03c6e4b4a20ec100059ffc7062427b1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 21 Dec 2023 12:20:04 -0500 Subject: [PATCH 2/2] lint --- .../angular/example_component_css.md | 6 +++--- .../v7/refresher/custom-scroll-target/demo.html | 2 +- .../v7/refresher/custom-scroll-target/javascript.md | 12 ++++++------ .../refresher/custom-scroll-target/react/main_css.md | 6 +++--- .../usage/v7/refresher/custom-scroll-target/vue.md | 12 ++++++------ .../angular/example_component_css.md | 6 +++--- .../v8/refresher/custom-scroll-target/demo.html | 2 +- .../v8/refresher/custom-scroll-target/javascript.md | 12 ++++++------ .../refresher/custom-scroll-target/react/main_css.md | 6 +++--- .../usage/v8/refresher/custom-scroll-target/vue.md | 12 ++++++------ versioned_docs/version-v7/api/refresher.md | 6 +++--- 11 files changed, 41 insertions(+), 41 deletions(-) diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md index b868a38923a..fbfd63c926a 100644 --- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md +++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_css.md @@ -11,11 +11,11 @@ .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v7/refresher/custom-scroll-target/demo.html b/static/usage/v7/refresher/custom-scroll-target/demo.html index 0f9630c16d4..9ec8928bbc6 100644 --- a/static/usage/v7/refresher/custom-scroll-target/demo.html +++ b/static/usage/v7/refresher/custom-scroll-target/demo.html @@ -26,7 +26,7 @@ width: 1px; height: 1px; - content: ""; + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v7/refresher/custom-scroll-target/javascript.md b/static/usage/v7/refresher/custom-scroll-target/javascript.md index aeba8487598..8d0da2bcd6b 100644 --- a/static/usage/v7/refresher/custom-scroll-target/javascript.md +++ b/static/usage/v7/refresher/custom-scroll-target/javascript.md @@ -35,21 +35,21 @@ width: 100%; overflow-y: auto; } - + .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } - + .ion-content-scroll-host::before { bottom: -1px; } - + .ion-content-scroll-host::after { top: -1px; } diff --git a/static/usage/v7/refresher/custom-scroll-target/react/main_css.md b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md index b868a38923a..fbfd63c926a 100644 --- a/static/usage/v7/refresher/custom-scroll-target/react/main_css.md +++ b/static/usage/v7/refresher/custom-scroll-target/react/main_css.md @@ -11,11 +11,11 @@ .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md index 7acb85d3500..4673a73b345 100644 --- a/static/usage/v7/refresher/custom-scroll-target/vue.md +++ b/static/usage/v7/refresher/custom-scroll-target/vue.md @@ -45,21 +45,21 @@ width: 100%; overflow-y: auto; } - + .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } - + .ion-content-scroll-host::before { bottom: -1px; } - + .ion-content-scroll-host::after { top: -1px; } diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md index b868a38923a..fbfd63c926a 100644 --- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md @@ -11,11 +11,11 @@ .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v8/refresher/custom-scroll-target/demo.html b/static/usage/v8/refresher/custom-scroll-target/demo.html index 0f9630c16d4..9ec8928bbc6 100644 --- a/static/usage/v8/refresher/custom-scroll-target/demo.html +++ b/static/usage/v8/refresher/custom-scroll-target/demo.html @@ -26,7 +26,7 @@ width: 1px; height: 1px; - content: ""; + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v8/refresher/custom-scroll-target/javascript.md b/static/usage/v8/refresher/custom-scroll-target/javascript.md index aeba8487598..8d0da2bcd6b 100644 --- a/static/usage/v8/refresher/custom-scroll-target/javascript.md +++ b/static/usage/v8/refresher/custom-scroll-target/javascript.md @@ -35,21 +35,21 @@ width: 100%; overflow-y: auto; } - + .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } - + .ion-content-scroll-host::before { bottom: -1px; } - + .ion-content-scroll-host::after { top: -1px; } diff --git a/static/usage/v8/refresher/custom-scroll-target/react/main_css.md b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md index b868a38923a..fbfd63c926a 100644 --- a/static/usage/v8/refresher/custom-scroll-target/react/main_css.md +++ b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md @@ -11,11 +11,11 @@ .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } .ion-content-scroll-host::before { diff --git a/static/usage/v8/refresher/custom-scroll-target/vue.md b/static/usage/v8/refresher/custom-scroll-target/vue.md index 7acb85d3500..4673a73b345 100644 --- a/static/usage/v8/refresher/custom-scroll-target/vue.md +++ b/static/usage/v8/refresher/custom-scroll-target/vue.md @@ -45,21 +45,21 @@ width: 100%; overflow-y: auto; } - + .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } - + .ion-content-scroll-host::before { bottom: -1px; } - + .ion-content-scroll-host::after { top: -1px; } diff --git a/versioned_docs/version-v7/api/refresher.md b/versioned_docs/version-v7/api/refresher.md index 120e2c6262b..23760012f99 100644 --- a/versioned_docs/version-v7/api/refresher.md +++ b/versioned_docs/version-v7/api/refresher.md @@ -71,11 +71,11 @@ Developers should apply the following CSS to the scrollable container. This CSS .ion-content-scroll-host::before, .ion-content-scroll-host::after { position: absolute; - + width: 1px; height: 1px; - - content: ""; + + content: ''; } .ion-content-scroll-host::before {