From 710dfd752695e425538d2cf0a9f594ea7f3ad11c Mon Sep 17 00:00:00 2001
From: Frederick Fogerty <frederick.fogerty@gmail.com>
Date: Sat, 3 Nov 2018 08:16:29 +1300
Subject: [PATCH] fix: stop loupe being shown in incorrect position on
 mouseenter (#113)

* fix: stop width and height values being affected by transforms in ZoomPane

* chore: remove unused variable

* chore: remove console.logs
---
 src/js/BoundingBox.js | 2 --
 src/js/ZoomPane.js    | 6 ++++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/BoundingBox.js b/src/js/BoundingBox.js
index 766a7900..8d7927ae 100644
--- a/src/js/BoundingBox.js
+++ b/src/js/BoundingBox.js
@@ -59,8 +59,6 @@ export default class BoundingBox {
     let inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + pageXOffset;
     let inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + pageYOffset;
 
-    let elRect = this.el.getBoundingClientRect();
-
     if (inlineLeft < triggerRect.left + pageXOffset) {
       inlineLeft = triggerRect.left + pageXOffset;
     } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + pageXOffset) {
diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js
index ddb80577..4c5cbd30 100644
--- a/src/js/ZoomPane.js
+++ b/src/js/ZoomPane.js
@@ -84,8 +84,10 @@ export default class ZoomPane {
   // `percentageOffsetX` and `percentageOffsetY` must be percentages
   // expressed as floats between `0' and `1`.
   setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {
-    const { width: imgElWidth, height: imgElHeight } = this.imgEl.getBoundingClientRect();
-    const { width: elWidth, height: elHeight } = this.el.getBoundingClientRect();
+    const imgElWidth = this.imgEl.offsetWidth;
+    const imgElHeight = this.imgEl.offsetHeight;
+    const elWidth = this.el.offsetWidth;
+    const elHeight = this.el.offsetHeight;
 
     const centreOfContainerX = elWidth / 2;
     const centreOfContainerY = elHeight / 2;