Esto está siendo raro. Estoy usando getBoundingClientRect() para obtener los valores para posicionar mi div de color azul para que pueda rodear un elemento al pasar el mouse.

Funciona muy bien y obtiene todos los valores correctamente. Vea esto como referencia:

Como puede ver, el div azul aquí rodeó el elemento de contraseña al pasar el mouse como debería. (He usado el formulario de demostración de Bootstrap de w3schools para esto).

Sin embargo, el problema surge cuando creo una página de formulario yo mismo sin usar Bootstrap ni ningún otro marco.

Obtiene la parte superior e izquierda correctamente, ¡pero el ancho y la altura 2px más! Vea el espacio adicional aquí:

No sé qué está causando que esto genere esos 2px adicionales. ¿Por qué funciona perfectamente con Bootstrap o W3.CSS como frameworks pero escupe 2px más sin ningún framework? ¿Cuál es la solución para esto?

Aquí está el fragmento de código:

 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"; });