html - Weird JavaScript bug in Chromium based browsers

Question

For a school exercise, I'm trying to increase the width of a button using Javascript.

This is my code:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(button.offsetWidth);
  button.style.width = button.offsetWidth + 1 + "px";
});

<button>Press me!</button>

Answer 1

Using the function getBoundingClientRect() fixes the issue.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log(button.getBoundingClientRect().width);
  button.style.width = button.getBoundingClientRect().width + 1 + "px";
});

<button>Press me!</button>