Make more cross-browser compatible

src/page/about/about.scss

@@ -25,6 +25,10 @@
     margin-top: $small-margin;
   }
 
+  h1 {
+    hyphens: none;
+  }
+
   @media (max-width: $breakpoint-width) {
     h1 {
       margin-top: $small-margin;

src/page/background/background.html.ts

@@ -5,4 +5,5 @@ export const generate = (): html => `
     <section id="background-container">
         <section id="background"></section>
     </section>
+    <div id="edge-hack"></div>
 `;

src/page/background/background.scss

@@ -18,15 +18,15 @@
     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
+    transform-style: flat;
 
     div {
       position: -webkit-sticky;
-      border-radius: 100px;
       position: absolute;
       left: 0;
       top: 0;
-      width: 7px;
+      border-radius: 100px;
+      width: 140px;
 
       transition: transform $long-transition-time, opacity $long-transition-time;
       will-change: transform, opacity;
@@ -42,3 +42,7 @@
     }
   }
 }
+
+#edge-hack {
+  position: fixed;
+}

src/page/background/background.ts

@@ -3,22 +3,29 @@ import {
   getHeight,
   createElement,
   randomFactory,
-  sum
+  sum,
+  isChrome
 } from "../../framework/helper";
 import { PageEvent, PageEventType } from "../../framework/page-event";
 import { Blob } from "./blob";
 import { generate } from "./background.html";
 
 export class PageBackground extends PageElement {
-  private blobs: Array<Blob> = [];
-  private blobSpacing = 350;
+  private readonly blobs: Array<Blob> = [];
+  private readonly blobSpacing = 350;
   private previousWidth: number;
   private previousHeight: number;
-  private scrollPositionToSet: number = null;
+  private previousScrollPositionToSet: number = 0;
+  private previousTimestamp: DOMHighResTimeStamp = null;
+  private readonly baseDeltaTime = (1 / 30) * 1000;
+  private readonly maxBaseSpeedInPixels = 20;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
     this.setElement(createElement(generate()));
+    if (isChrome()) {
+      this.query("#background").style.transformStyle = "preserve-3d";
+    }
     Blob.initialize(10, 30, 5);
   }
 
@@ -34,23 +41,44 @@ 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));
+    window.requestAnimationFrame(timestamp =>
+      this.scrollContainer(timestamp, parent)
+    );
   }
 
-  private saveScrollPosition(parent: PageElement) {
-    this.scrollPositionToSet = parent.getElement().scrollTop;
-  }
+  private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
+    const deltaTime = this.getDeltaTime(timestamp);
+    const scrollPositionToSet = parent.getElement().scrollTop;
+    const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
+    this.previousScrollPositionToSet = scrollPositionToSet;
 
-  private scrollContainer(parent: PageElement) {
-    if (this.scrollPositionToSet !== null) {
-      this.getElement().scrollTo(0, this.scrollPositionToSet);
-      this.scrollPositionToSet = null;
+    const threshold = 2;
+    if (deltaScroll > threshold) {
+      const smoothDeltaScroll =
+        (deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime);
+      this.getElement().scrollTop += smoothDeltaScroll;
+    } else {
+      const error = scrollPositionToSet - this.getElement().scrollTop;
+      if (Math.abs(error) > threshold) {
+        this.getElement().scrollTop += Math.min(
+          error / 4,
+          this.maxBaseSpeedInPixels,
+          error
+        );
+      }
     }
 
-    window.requestAnimationFrame(() => this.scrollContainer(parent));
+    window.requestAnimationFrame(timestamp =>
+      this.scrollContainer(timestamp, parent)
+    );
+  }
+
+  private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
+    const deltaTime = this.previousTimestamp
+      ? timestamp - this.previousTimestamp
+      : 0;
+    this.previousTimestamp = timestamp;
+    return deltaTime;
   }
 
   private resize(parent: PageElement, heightChange?: number) {

src/page/background/blob.ts

@@ -35,8 +35,8 @@ export class Blob {
       );
     this.element.style.zIndex = (-this.z).toString();
     this.element.style.height = `${randomInInterval(
-      8,
-      37,
+      160,
+      740,
       Blob.creatorRandom
     )}px`;
   }
@@ -86,7 +86,7 @@ export class Blob {
     startOffset: number,
     endOffset: number
   ) {
-    this.element.style.transform = `
+    const value = `
       translateX(${this.randomWithKnownZ(random, width, width)}px)
       translateY(${this.randomWithKnownZ(
         random,
@@ -95,9 +95,10 @@ export class Blob {
         startOffset,
         endOffset
       )}px)
-      scale(20)
       translateZ(${-this.z}px)
       rotate(-20deg)
     `;
+    this.element.style["-webkit-transform"] = value;
+    this.element.style.transform = value;
   }
 }