Refactor and fix too long page bug

src/helper/get-height.ts

@@ -1,11 +1,12 @@
 export const getHeight = (e: HTMLElement): number => {
   // ignores margin collapse
   const computedStyle = getComputedStyle(e);
+
   return (
     e.clientHeight +
-    parseInt(computedStyle.marginTop) +
+    parseFloat(computedStyle.marginTop) +
-    parseInt(computedStyle.marginBottom) +
+    parseFloat(computedStyle.marginBottom) +
-    parseInt(computedStyle.borderTopWidth) +
+    parseFloat(computedStyle.borderTopWidth) +
-    parseInt(computedStyle.borderBottomWidth)
+    parseFloat(computedStyle.borderBottomWidth)
   );
 };

src/helper/mix.ts

@@ -1,2 +1,2 @@
 export const mix = (from: number, to: number, q: number): number =>
-  from * (1 - q) + to * q;
+  from + (to - from) * q;

src/page/background/background.ts

@@ -72,13 +72,18 @@ export class Background extends PageElement {
   private randomizeBlobs(topOffset: number, bottomOffset: number) {
     this.random.seed = 50;
     this.blobs.forEach((b) => {
-      const z = -Number.parseInt(b.style.zIndex);
+      const z = -parseFloat(b.style.zIndex);
-      const [x, y] = this.randomXY(z, topOffset, bottomOffset, parseInt(b.style.height));
+      const [x, y] = this.getRandomPosition(
+        z,
+        topOffset,
+        bottomOffset,
+        parseFloat(b.style.height)
+      );
       b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
     });
   }
 
-  private randomXY(
+  private getRandomPosition(
     z: number,
     topOffset: number,
     bottomOffset: number,
@@ -112,10 +117,7 @@ export class Background extends PageElement {
           z / Background.zMax
         )
       ),
-      this.random.inInterval(
+      this.random.inInterval(mix(topOffset, farTop, z / Background.zMax), farBottom),
-        mix(topOffset, farTop, z / Background.zMax),
-        mix(this.contentHeight - bottomOffset, farBottom, z / Background.zMax)
-      ),
     ];
   }
 }