[FIX] web: Fix the bug while zoom on image

Currently when zoom slowly from right to left on employee image it
will not zoom the image.

currently to hide the zoom image we used target.width() and the method width
gives the width of the selected element (excluding padding, border
and margin) so due to border excluded it will hide the zooming image.
Aslo the offsetHeight property returns the viewable height of an
element in pixels, including padding, border and scrollbar, but not
the margin.

The reason why the 'viewable' word is specified, is because if the
element's content is taller than the actual height of the element,
this property will only return the height that is visible.

so instead of method width we used method outerWidth which gives
width of the selected element (including padding and border, excluding
margin).

closes odoo/odoo#46619

Co-authered-by: Mahendra Barad <mba@odoo.com>
Task: 2199218
Closes: #46619
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

1 files changed, 3 insertions, 3 deletions

diff --git a/addons/web/static/src/js/libs/zoomodoo.js b/addons/web/static/src/js/libs/zoomodoo.js
index b4a97c9a8ad..1eaa4cedd48 100644
--- a/addons/web/static/src/js/libs/zoomodoo.js
+++ b/addons/web/static/src/js/libs/zoomodoo.js
@@ -168,8 +168,8 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
         this.$flyout.css('transform', 'translate3d(' + left + 'px, ' + top + 'px, 0px)');
     }
 
-    w1 = this.$target.width();
-    h1 = this.$target.height();
+    w1 = this.$target[0].offsetWidth;
+    h1 = this.$target[0].offsetHeight;
 
     w2 = this.$flyout.width();
     h2 = this.$flyout.height();
@@ -291,7 +291,7 @@ ZoomOdoo.prototype._move = function (e) {
     var xl = Math.ceil(pl * rw);
 
     // Close if outside
-    if (xl < 0 || xt < 0 || xl > dw || xt > dh || lx > (offset.left + this.$target.width())) {
+    if (xl < 0 || xt < 0 || xl > dw || xt > dh || lx > (offset.left + this.$target.outerWidth())) {
         this.hide();
     } else {
         var top = xt * -1;