it works

src/page/background/background.html.ts

@@ -2,5 +2,7 @@ import { html } from "../../model/misc";
 import "./background.scss";
 
 export const generate = (): html => `
-    <section id="background"></section>
+    <section id="background-container">
+        <section id="background"></section>
+    </section>
 `;

src/page/background/background.scss

@@ -1,32 +1,43 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-#background {
+#background-container {
   position: absolute;
   left: 0;
   top: 0;
+  height: 100%;
+  width: 100%;
+
   z-index: -1;
+  -webkit-overflow-scrolling: touch;
+  perspective: 5px;
+  perspective-origin: center center;
   overflow: hidden;
-  will-change: width, height;
-  transition: height $long-transition-time, width $long-transition-time;
 
-  div {
-    border-radius: 100px;
-    position: absolute;
-    left: -1000vh;
-    top: -1000vh;
-    margin: 1000vh;
-    width: 7px;
+  #background {
+    overflow: hidden;
+    will-change: width, height;
+    transition: height $long-transition-time, width $long-transition-time;
+    transform-style: preserve-3d; // really important for performance on mobile devices
 
-    transition: transform $long-transition-time, opacity $long-transition-time;
-    will-change: transform, opacity;
-    animation: fade-in 1s linear;
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
+    div {
+      position: -webkit-sticky;
+      border-radius: 100px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 7px;
+
+      transition: transform $long-transition-time, opacity $long-transition-time;
+      will-change: transform, opacity;
+      animation: fade-in 1s linear;
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
       }
     }
   }

src/page/background/background.ts

@@ -14,6 +14,7 @@ export class PageBackground extends PageElement {
   private blobSpacing = 350;
   private previousWidth: number;
   private previousHeight: number;
+  private scrollPositionToSet: number = null;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
@@ -33,6 +34,23 @@ export class PageBackground extends PageElement {
   private bindListeners(parent: PageElement) {
     window.addEventListener("resize", () => this.resize(parent));
     window.addEventListener("load", () => this.resize(parent));
+    parent
+      .getElement()
+      .addEventListener("scroll", () => this.saveScrollPosition(parent));
+    window.requestAnimationFrame(() => this.scrollContainer(parent));
+  }
+
+  private saveScrollPosition(parent: PageElement) {
+    this.scrollPositionToSet = parent.getElement().scrollTop;
+  }
+
+  private scrollContainer(parent: PageElement) {
+    if (this.scrollPositionToSet !== null) {
+      this.getElement().scrollTo(0, this.scrollPositionToSet);
+      this.scrollPositionToSet = null;
+    }
+
+    window.requestAnimationFrame(() => this.scrollContainer(parent));
   }
 
   private resize(parent: PageElement, heightChange?: number) {
@@ -50,8 +68,8 @@ export class PageBackground extends PageElement {
     this.previousHeight = height;
     this.previousWidth = width;
 
-    this.getElement().style.width = `${width}px`;
-    this.getElement().style.height = `${height}px`;
+    this.query("#background").style.width = `${width}px`;
+    this.query("#background").style.height = `${height}px`;
 
     const requiredBlobCount = Math.round(
       (width * height) / this.blobSpacing ** 2
@@ -59,7 +77,7 @@ export class PageBackground extends PageElement {
 
     while (requiredBlobCount > this.blobs.length) {
       const blob = new Blob();
-      this.getElement().appendChild(blob.htmlElement);
+      this.query("#background").appendChild(blob.htmlElement);
       this.blobs.push(blob);
     }