it works

.idea/workspace.xml

@@ -3,10 +3,9 @@
   <component name="ChangeListManager">
     <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -40,7 +39,7 @@
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="ignore_missing_gitignore" value="true" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/static" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/page/background" />
     <property name="node.js.detected.package.stylelint" value="true" />
     <property name="node.js.path.for.package.stylelint" value="project" />
     <property name="node.js.selected.package.stylelint" value="" />
@@ -50,6 +49,12 @@
     <property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
   </component>
   <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
+      <recent name="$PROJECT_DIR$" />
+    </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
@@ -57,11 +62,6 @@
       <recent name="C:\Projects\portfolio\CompiledCV\src" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
     </key>
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
-      <recent name="$PROJECT_DIR$" />
-    </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
@@ -105,7 +105,8 @@
       <workItem from="1577469180612" duration="18000" />
       <workItem from="1577526744211" duration="46374000" />
       <workItem from="1577639259221" duration="3798000" />
-      <workItem from="1577662869335" duration="4081000" />
+      <workItem from="1577662869335" duration="6536000" />
+      <workItem from="1577702567470" duration="3227000" />
     </task>
     <servers />
   </component>

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 {
+  #background {
-    border-radius: 100px;
+    overflow: hidden;
-    position: absolute;
+    will-change: width, height;
-    left: -1000vh;
+    transition: height $long-transition-time, width $long-transition-time;
-    top: -1000vh;
+    transform-style: preserve-3d; // really important for performance on mobile devices
-    margin: 1000vh;
-    width: 7px;
 
-    transition: transform $long-transition-time, opacity $long-transition-time;
+    div {
-    will-change: transform, opacity;
+      position: -webkit-sticky;
-    animation: fade-in 1s linear;
+      border-radius: 100px;
-    @keyframes fade-in {
+      position: absolute;
-      from {
+      left: 0;
-        opacity: 0;
+      top: 0;
-      }
+      width: 7px;
-      to {
+
-        opacity: 1;
+      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.query("#background").style.width = `${width}px`;
-    this.getElement().style.height = `${height}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);
     }
 

src/styles.scss

@@ -30,11 +30,8 @@ body {
 
   & > main {
     height: 100%;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
-    perspective-origin: center center;
-    perspective: 5px;
-    will-change: scroll-position, transform;
 
     noscript {
       @include square(100%);