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';
 
 <CustomScrollTarget />
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..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
@@ -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..9ec8928bbc6 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;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v7/refresher/custom-scroll-target/javascript.md b/static/usage/v7/refresher/custom-scroll-target/javascript.md
index dde203612e4..8d0da2bcd6b 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;
+  }
 </style>
 ```
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..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
@@ -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..4673a73b345 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;
+  }
 </style>
 ```
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..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
@@ -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..9ec8928bbc6 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;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v8/refresher/custom-scroll-target/javascript.md b/static/usage/v8/refresher/custom-scroll-target/javascript.md
index dde203612e4..8d0da2bcd6b 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;
+  }
 </style>
 ```
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..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
@@ -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..4673a73b345 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;
+  }
 </style>
 ```
diff --git a/versioned_docs/version-v7/api/refresher.md b/versioned_docs/version-v7/api/refresher.md
index 6aa273a68c6..23760012f99 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';
 
 <CustomScrollTarget />