change window.innerHeight to dirty-hack Globals.screenHeight

Author: illarionov-company

src-lib/engine/Driver.ts

@@ -102,7 +102,7 @@ export class Driver {
 	updateLimits() {
 		this.start.updateLimits()
 		this.end.updateLimits()
-		if (this.end.top < this.start.top) this.end.top += window.innerHeight
+		if (this.end.top < this.start.top) this.end.top += Globals.screenHeight
 		this.helper.updateLimits()
 
 		for (let property of this.properties) {
@@ -210,7 +210,7 @@ export class DriverBorder {
 	updateLimits() {
 		this.top = this.domElement.getBoundingClientRect().top + Globals.scroll
 
-		if (this.edge === "bottom") this.top -= window.innerHeight
+		if (this.edge === "bottom") this.top -= Globals.screenHeight
 	}
 }
 
@@ -247,8 +247,8 @@ export class DriverHelper {
 		let top = this.driver.start.top
 		let end = this.driver.end.top
 
-		if (this.driver.start.edge === "bottom") top += window.innerHeight
-		if (this.driver.end.edge === "bottom") end += window.innerHeight
+		if (this.driver.start.edge === "bottom") top += Globals.screenHeight
+		if (this.driver.end.edge === "bottom") end += Globals.screenHeight
 
 		this.domElement.style.setProperty("top", top + "px")
 		this.domElement.style.setProperty("height", end - top + "px")

src-lib/engine/TheSuperSonicPluginForScrollBasedAnimation.ts

@@ -87,6 +87,7 @@ export class TheSuperSonicPluginForScrollBasedAnimation {
 
 	/** Updates global scroll and driver DOM elements top offset. Called once on page load and each time after window.resize */
 	updateLimits() {
+		this.updateScreenHeight()
 		this.updateScroll()
 		Driver.updateLimits()
 
@@ -99,6 +100,27 @@ export class TheSuperSonicPluginForScrollBasedAnimation {
 			window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 	}
 
+	/** Dirty hack for calculating screen height. We can't just use "window.innerHeight" because it "jumps" on mobile phones when you scroll and toolbar collapses */
+	updateScreenHeight() {
+		const styles = {
+			position: "absolute",
+			left: "0",
+			top: "0",
+			height: "100vh",
+			width: "1px",
+			zIndex: "-1",
+			visibility: "hidden",
+		}
+		let helper = document.createElement("div")
+		for (let property in styles) {
+			// @ts-ignore
+			helper.style.setProperty(property, styles[property])
+		}
+		document.body.appendChild(helper)
+		Globals.screenHeight = helper.clientHeight // it is a dirty hack because this line causes a reflow
+		helper.remove()
+	}
+
 	/** Add event listeners */
 	addEventListeners() {
 		this.onResize = () => {

src-lib/singletons/Globals.ts

@@ -1,5 +1,6 @@
 const Globals: Globals = {
 	scroll: 0,
+	screenHeight: 0,
 	rafActive: true,
 	rafId: 0,
 	renderedInitially: false,

src-lib/types.d.ts

@@ -2,6 +2,7 @@ type _Element = import("./engine/Element").Element
 
 interface Globals {
 	scroll: number
+	screenHeight: number
 	rafActive: boolean
 	rafId: number
 	renderedInitially: boolean