Listen for transition resize events, remove ResizeObserver polyfill

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epubjs",
-  "version": "0.3.40",
+  "version": "0.3.41",
   "description": "Parse and Render Epubs",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -62,21 +62,20 @@
     "optimist": "^0.6.1",
     "portfinder": "^1.0.13",
     "raw-loader": "^0.5.1",
-    "resize-observer-polyfill": "^1.4.2",
     "serve-static": "^1.11.2",
     "uglify": "^0.1.5",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "webpack": "^v2.2.1",
     "webpack-dev-middleware": "^1.10.0",
-    "webpack-dev-server": "^v2.3.0"
+    "webpack-dev-server": "^2.6.1"
   },
   "dependencies": {
-    "event-emitter": "^0.3.4",
+    "event-emitter": "^0.3.5",
     "jszip": "^3.1.3",
     "marks-pane": "^1.0.1",
-    "path-webpack": "^0.0.3",
+    "path-webpack": "0.0.3",
     "stream-browserify": "^2.0.1",
-    "xmldom": "0.1.27"
+    "xmldom": "^0.1.27"
   }
 }

src/contents.js

@@ -4,7 +4,6 @@ import EpubCFI from "./epubcfi";
 import Mapping from "./mapping";
 import {replaceLinks} from "./utils/replacements";
 import { Pane, Highlight, Underline } from "marks-pane";
-import ResizeObserver from 'resize-observer-polyfill';
 
 // Dom events to listen for
 const EVENTS = ["keydown", "keyup", "keypressed", "mouseup", "mousedown", "click", "touchend", "touchstart"];
@@ -303,11 +302,11 @@ class Contents {
 
 		this.addSelectionListeners();
 
-		if (this.document === document) {
+		this.transitionListeners();
-			this.resizeObservers();
+
-		} else {
 		this.resizeListeners();
-		}
+
+		this.resizeObservers();
 
 		this.linksHandler();
 	}
@@ -321,31 +320,7 @@ class Contents {
 		clearTimeout(this.expanding);
 	}
 
-	resizeListeners() {
+	resizeCheck() {
-		var width, height;
-		// Test size again
-		clearTimeout(this.expanding);
-
-		width = this.textWidth();
-		height = this.textHeight();
-
-		if (width != this._size.width || height != this._size.height) {
-
-			this._size = {
-				width: width,
-				height: height
-			};
-
-			this.pane && this.pane.render();
-			this.emit("resize", this._size);
-		}
-
-		this.expanding = setTimeout(this.resizeListeners.bind(this), 350);
-	}
-
-	resizeObservers() {
-		let el = this.document.body;
-		const ro = new ResizeObserver((entries, observer) => {
 		let width = this.textWidth();
 		let height = this.textHeight();
 
@@ -357,11 +332,33 @@ class Contents {
 			};
 
 			this.pane && this.pane.render();
+			this.onResize && this.onResize(this._size);
 			this.emit("resize", this._size);
 		}
-		});
+	}
 
-		ro.observe(el);
+	resizeListeners() {
+		var width, height;
+		// Test size again
+		clearTimeout(this.expanding);
+
+		width = this.textWidth();
+		height = this.textHeight();
+
+		this.resizeCheck();
+
+		this.expanding = setTimeout(this.resizeListeners.bind(this), 350);
+	}
+
+	transitionListeners() {
+		let body = this.content;
+
+		body.style['transitionProperty'] = "font, font-size, font-size-adjust, font-stretch, font-variation-settings, font-weight, width, height";
+		body.style['transitionDuration'] = "0.001ms";
+		body.style['transitionTimingFunction'] = "linear";
+		body.style['transitionDelay'] = "0";
+
+		this.document.addEventListener('transitionend', this.resizeCheck.bind(this));
 	}
 
 	//https://github.com/tylergaw/media-query-events/blob/master/js/mq-events.js
@@ -394,26 +391,17 @@ class Contents {
 		}
 	}
 
-	observe(target) {
+	resizeObservers() {
-		var renderer = this;
-
 		// create an observer instance
-		var observer = new MutationObserver(function(mutations) {
+		this.observer = new MutationObserver((mutations) => {
-			if(renderer._expanding) {
+			this.resizeCheck();
-				renderer.expand();
-			}
-			// mutations.forEach(function(mutation) {
-			//   console.log(mutation);
-			// });
 		});
 
 		// configuration of the observer:
-		var config = { attributes: true, childList: true, characterData: true, subtree: true };
+		let config = { attributes: true, childList: true, characterData: true, subtree: true };
 
 		// pass in the target node, as well as the observer options
-		observer.observe(target, config);
+		this.observer.observe(this.document, config);
-
-		return observer;
 	}
 
 	imageLoadListeners(target) {
@@ -936,6 +924,8 @@ class Contents {
 			this.observer.disconnect();
 		}
 
+		this.document.removeEventListener('transitionend', this.resizeCheck);
+
 		this.removeListeners();
 
 	}