From a3760d92a67f211e7c118d39d509bfd327e19e29 Mon Sep 17 00:00:00 2001
From: Fred Chasen <fchasen@gmail.com>
Date: Sat, 13 Oct 2018 16:35:53 -0700
Subject: [PATCH] Replace marks after reframe

---
 src/annotations.js           |  4 +--
 src/managers/views/iframe.js | 65 ++++++++++++++++++++++--------------
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/annotations.js b/src/annotations.js
index ecbec8a..651d607 100644
--- a/src/annotations.js
+++ b/src/annotations.js
@@ -218,8 +218,8 @@ class Annotation {
 		cfiRange,
 		data,
 		sectionIndex,
-		cb, 
-		className, 
+		cb,
+		className,
 		styles
 	}) {
 		this.type = type;
diff --git a/src/managers/views/iframe.js b/src/managers/views/iframe.js
index cc3db3c..e52eb22 100644
--- a/src/managers/views/iframe.js
+++ b/src/managers/views/iframe.js
@@ -327,6 +327,16 @@ class IframeView {
 
 		this.pane && this.pane.render();
 
+		requestAnimationFrame(() => {
+			let mark;
+			for (let m in this.marks) {
+				if (this.marks.hasOwnProperty(m)) {
+					mark = this.marks[m];
+					this.placeMark(mark.element, mark.range);
+				}
+			}
+		});
+
 		this.onResize(this, size);
 
 		this.emit(EVENTS.VIEWS.RESIZED, size);
@@ -643,33 +653,9 @@ class IframeView {
 			range.selectNodeContents(parent);
 		}
 
-		let top, right, left;
-
-		if(this.layout.name === "pre-paginated" ||
-			this.settings.axis !== "horizontal") {
-			let pos = range.getBoundingClientRect();
-			top = pos.top;
-			right = pos.right;
-		} else {
-			// Element might break columns, so find the left most element
-			let rects = range.getClientRects();
-			let rect;
-			for (var i = 0; i != rects.length; i++) {
-				rect = rects[i];
-				if (!left || rect.left < left) {
-					left = rect.left;
-					right = left + this.layout.columnWidth - this.layout.gap;
-					top = rect.top;
-				}
-			}
-		}
-
-
 		let mark = this.document.createElement("a");
 		mark.setAttribute("ref", "epubjs-mk");
 		mark.style.position = "absolute";
-		mark.style.top = `${top}px`;
-		mark.style.left = `${right}px`;
 
 		mark.dataset["epubcfi"] = cfiRange;
 
@@ -687,13 +673,42 @@ class IframeView {
 		mark.addEventListener("click", emitter);
 		mark.addEventListener("touchstart", emitter);
 
+		this.placeMark(mark, range);
+
 		this.element.appendChild(mark);
 
-		this.marks[cfiRange] = { "element": mark, "listeners": [emitter, cb] };
+		this.marks[cfiRange] = { "element": mark, "range": range, "listeners": [emitter, cb] };
 
 		return parent;
 	}
 
+	placeMark(element, range) {
+		let top, right, left;
+
+		if(this.layout.name === "pre-paginated" ||
+			this.settings.axis !== "horizontal") {
+			let pos = range.getBoundingClientRect();
+			top = pos.top;
+			right = pos.right;
+		} else {
+			// Element might break columns, so find the left most element
+			let rects = range.getClientRects();
+
+			let rect;
+			for (var i = 0; i != rects.length; i++) {
+				rect = rects[i];
+				if (!left || rect.left < left) {
+					left = rect.left;
+					right = left + this.layout.columnWidth - this.layout.gap;
+					top = rect.top;
+				}
+			}
+		}
+
+		element.style.top = `${top}px`;
+		element.style.left = `${right}px`;
+	}
+
 	unhighlight(cfiRange) {
 		let item;
 		if (cfiRange in this.highlights) {