fix(DOMRenderer): defense browser for webkit below 537

naver · Nov 30, 2017 · 177600b · 177600b
1 parent 50e0136
commit 177600b
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 85 deletions.
diff --git a/dist/infinitegrid.js b/dist/infinitegrid.js
diff --git a/dist/infinitegrid.js.map b/dist/infinitegrid.js.map
diff --git a/dist/infinitegrid.min.js b/dist/infinitegrid.min.js
diff --git a/dist/infinitegrid.min.js.map b/dist/infinitegrid.min.js.map
diff --git a/dist/infinitegrid.pkgd.js b/dist/infinitegrid.pkgd.js
diff --git a/dist/infinitegrid.pkgd.js.map b/dist/infinitegrid.pkgd.js.map
diff --git a/dist/infinitegrid.pkgd.min.js b/dist/infinitegrid.pkgd.min.js
diff --git a/dist/infinitegrid.pkgd.min.js.map b/dist/infinitegrid.pkgd.min.js.map
diff --git a/dist/parallax.js b/dist/parallax.js
diff --git a/dist/parallax.js.map b/dist/parallax.js.map
diff --git a/dist/parallax.min.js b/dist/parallax.min.js
diff --git a/dist/parallax.min.js.map b/dist/parallax.min.js.map
diff --git a/src/DOMRenderer.js b/src/DOMRenderer.js
@@ -5,7 +5,7 @@ import {
 	MULTI,
 	GROUPKEY_ATT,
 	CONTAINER_CLASSNAME,
-	// DEFENSE_BROWSER,
+	DEFENSE_BROWSER,
 } from "./consts";
 import {
 	$,
@@ -15,6 +15,23 @@ import {
 	getStyles,
 } from "./utils";
 
+
+function _defense(element) {
+	const container = document.createElement("div");
+
+	container.className = CONTAINER_CLASSNAME;
+	container.style.height = "100%";
+
+	const children = element.children;
+	const length = children.length;	// for IE8
+
+	for (let i = 0; i < length; i++) {
+		container.appendChild(children[0]);
+	}
+
+	element.appendChild(container);
+	return container;
+}
 export default class DOMRenderer {
 	static renderItem(item, styles) {
 		if (item.el) {
@@ -125,29 +142,13 @@ export default class DOMRenderer {
 			element.style[`overflow${target[0]}`] = "scroll";
 			element.style[`overflow${target[1]}`] = "hidden";
 			this.view = element;
-			this.container = element; // DEFENSE_BROWSER ? this._defense(element) : element;
+			// defense code for android < 4.4 or webkit < 537
+			this.container = !this.options.isVertical && DEFENSE_BROWSER ? _defense(element) : element;
 		} else {
 			this.view = window;
 			this.container = element;
 		}
 	}
-	_defense(element) {
-		const container = document.createElement("div");
-
-		container.className = CONTAINER_CLASSNAME;
-
-		const children = element.children;
-		const length = children.length;	// for IE8
-		const target = this.options.isVertical ? ["Y", "X"] : ["X", "Y"];
-
-		for (let i = 0; i < length; i++) {
-			container.appendChild(children[0]);
-		}
-		element.style[`overflow${target[0]}`] = "scroll";
-		element.style[`overflow${target[1]}`] = "hidden";
-		element.appendChild(container);
-		return container;
-	}
 	append(items) {
 		this._insert(items, APPEND, {
 			top: DUMMY_POSITION,
@@ -206,7 +207,7 @@ export default class DOMRenderer {
 		return this._size.viewport;
 	}
 	setContainerSize(size) {
-		if (!this.options.isOverflowScroll) {
+		if (!this.options.isOverflowScroll || (!this.options.isVertical && DEFENSE_BROWSER)) {
 			this.container.style[this.options.isVertical ? "height" : "width"] = `${size}px`;
 		}
 	}

diff --git a/src/consts.js b/src/consts.js
@@ -57,9 +57,9 @@ export const ALIGN = {
 export const LOADING_APPEND = 1;
 export const LOADING_PREPEND = 2;
 export const PROCESSING = 4;
-export const DEFENSE_BROWSER = /android/.test(agent);
 
-alert(agent);
-/*
-"Mozilla/5.0 (Linux; Android 4.3; SHV-E250S Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36"
-*/
+
+const webkit = /applewebkit\/([\d|.]*)/g.exec(agent);
+const webkitVersion = (webkit && parseInt(webkit[1], 10)) || 0;
+
+export const DEFENSE_BROWSER = webkitVersion < 537;