docs(refresher): add rubber band effect for virtual scroll (#3346)

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';
 
 <CustomScrollTarget />

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;
+}
 ```

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;
+      }
     </style>
   </head>
 

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;
+  }
 </style>
 ```

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;
+}
 ```

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;
+  }
 </style>
 ```

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;
+}
 ```

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;
+      }
     </style>
   </head>
 

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;
+  }
 </style>
 ```

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;
+}
 ```

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;
+  }
 </style>
 ```

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';
 
 <CustomScrollTarget />