From 7f18e75647e9a8cdbcaea03784a174dabdadb6aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= <schmelczerandras@gmail.com>
Date: Mon, 30 Dec 2019 21:01:27 +0100
Subject: [PATCH] Make more cross-browser compatible

---
 .idea/workspace.xml                    |  7 ++-
 package.json                           | 15 ++++++-
 src/framework/helper.ts                |  4 +-
 src/index.html                         |  2 +-
 src/page/about/about.scss              |  4 ++
 src/page/background/background.html.ts |  1 +
 src/page/background/background.scss    | 10 +++--
 src/page/background/background.ts      | 60 +++++++++++++++++++-------
 src/page/background/blob.ts            |  9 ++--
 webpack.config.js                      | 10 ++---
 10 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 987db86..3483d2c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -3,10 +3,15 @@
   <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$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" 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/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" 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$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
diff --git a/package.json b/package.json
index 735ea3a..b37d537 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,24 @@
     "resumé"
   ],
   "author": "András Schmelczer",
-  "license": "ISC",
+  "license": "UNLICENSED",
   "bugs": {
     "url": "https://github.com/schmelczerandras/timeline/issues"
   },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "last 2 version",
+    "not dead",
+    "iOS >= 9",
+    "> 0.2%"
+  ],
   "homepage": "https://github.com/schmelczerandras/timeline#readme",
   "devDependencies": {
+    "autoprefixer": "^9.7.3",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.4.0",
     "file-loader": "^5.0.2",
@@ -32,6 +44,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
     "resolve-url-loader": "^3.1.1",
     "responsive-loader": "^1.2.0",
diff --git a/src/framework/helper.ts b/src/framework/helper.ts
index bdd67e3..194d701 100644
--- a/src/framework/helper.ts
+++ b/src/framework/helper.ts
@@ -1,4 +1,4 @@
-import { html, ResponsiveImage } from "../model/misc";
+import { html } from "../model/misc";
 
 export const createElement = (from: html): HTMLElement => {
   const element: HTMLElement = document.createElement("div");
@@ -91,3 +91,5 @@ export const range = ({
 
 export const last = <T>(list: Array<T>): T =>
   list.length > 0 ? list[list.length - 1] : undefined;
+
+export const isChrome = (): boolean => !!navigator.appVersion.match(/chrome/i);
diff --git a/src/index.html b/src/index.html
index 9eed1b7..163a888 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta charset="UTF-8" />
+        <meta charset="utf-8" />
 
         <meta property="og:image:width" content="1500">
         <meta property="og:image:height" content="785">
diff --git a/src/page/about/about.scss b/src/page/about/about.scss
index b992a44..d0a7926 100644
--- a/src/page/about/about.scss
+++ b/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;
diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts
index 5e1fc8d..cbd0a13 100644
--- a/src/page/background/background.html.ts
+++ b/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>
 `;
diff --git a/src/page/background/background.scss b/src/page/background/background.scss
index 6eb78eb..b77167d 100644
--- a/src/page/background/background.scss
+++ b/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;
+}
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 8582f39..4b7ce6c 100644
--- a/src/page/background/background.ts
+++ b/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) {
diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts
index c54d443..ccd5448 100644
--- a/src/page/background/blob.ts
+++ b/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;
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index a9d9248..39563cc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,6 +22,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       hash: true,
       xhtml: true,
+      minify: true,
       template: "./src/index.html"
     }),
     new MiniCssExtractPlugin({
@@ -109,12 +110,9 @@ module.exports = {
       {
         test: /\.scss$/i,
         use: [
-          {
-            loader: MiniCssExtractPlugin.loader
-          },
-          {
-            loader: "css-loader"
-          },
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
           {
             loader: "resolve-url-loader",
             options: {