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

@@ -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) {

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;