fix: center lens on cursor for images with border/padding

Author: CybotTM

packages/typo3-docs-theme/assets/js/image-zoom.js

@@ -817,10 +817,16 @@
 
             function updateLensPosition(x, y) {
                 var rect = img.getBoundingClientRect();
+                var style = window.getComputedStyle(img);
+                var borderLeft = parseFloat(style.borderLeftWidth) || 0;
+                var borderTop = parseFloat(style.borderTopWidth) || 0;
+                var paddingLeft = parseFloat(style.paddingLeft) || 0;
+                var paddingTop = parseFloat(style.paddingTop) || 0;
 
-                // Position lens centered on cursor (x,y are relative to image)
-                var lensXPos = x - lens.offsetWidth / 2;
-                var lensYPos = y - lens.offsetHeight / 2;
+                // Position lens centered on cursor (x,y are relative to image content area)
+                // Add border+padding offset since lens is positioned within imgWrapper
+                var lensXPos = x + borderLeft + paddingLeft - lens.offsetWidth / 2;
+                var lensYPos = y + borderTop + paddingTop - lens.offsetHeight / 2;
 
                 lens.style.left = lensXPos + 'px';
                 lens.style.top = lensYPos + 'px';