This is being weird. I am using getBoundingClientRect() to get the values to position my blue coloured div so that it can surround an element on mouseover.

It works great and is getting all the values correctly. See this for reference:

As you can see, the blue div here surrounded the password element on hover as it should! (I have used Bootstrap demo form from w3schools for this.)

However, the problem arises when I create a form page myself without using Bootstrap or any other framework.

It gets the top and left correctly, but width and height 2px more! See the extra spacing here:

I don't know what is causing this to output those 2px extra. Why it works perfectly with Bootstrap or W3.CSS like frameworks but spit out 2px more without any frameworks? What's the workaround for this?

Here's the code snippet:

document.addEventListener("mouseover", (e) => {
  elem = e.target;
  var rect = elem.getBoundingClientRect();

  var x = rect.left;
  var y = rect.top;
  var w = rect.width;
  var h = rect.height;

  div.style.width = w + "px";
  div.style.height = h + "px";
  div.style.left = x + window.scrollX + "px";
  div.style.top = y + window.scrollY + "px";
});