Button's font weight changes on hover with transition

Question

When I hover over a button all other buttons' font weight flickers for a small amount of time.

Setting the font size and boldness, removing the :active pseudo selector, and using :after doesn't fix it as well. Here is the codepen link: https://codepen.io/EdenTheCoder/pen/gOyJjBB

body {
  text-align: center;
  background-color: #131313;
  font-family: Arial;
  color: white;
}

.buttons {
  margin: 5px 5px;
  padding: 10px 100px;
  position: relative;
  border: 2px solid rgb(255, 0, 242);
  border-radius: 10px;
  background: #ffffff00;
  color: rgb(255, 0, 242);
  font-size: 16px;
  cursor: pointer;
  font-weight: normal;
}

.buttons:hover {
  transform: scale(0.95);
  transition: 200ms;
  color: rgb(255, 134, 249);
  border-color: rgb(75, 40, 202);
}

.buttons:active {
  transform: scale(0.9);
  transition: 100ms;
  color: rgb(255, 78, 175);
  border-color: rgb(75, 40, 202);
}

<button class="buttons">button</button>
<button class="buttons">button</button>
<button class="buttons">button</button>

Answer 1

This seems to be caused by the font's sub-pixel rendering result not being retained on elements after a positioned element when an animation is triggered. (I'm guessing this because removing position:relative also solves the problem.) I can only reproduce on Windows Chrome and Edge, so I'm not sure if this is a bug on Blink or not.

One fix is by adding a higher z-index on the hovered element (or removing position:relative as stated above if not needed).

body {
  text-align: center;
  background-color: #131313;
  font-family: Arial;
  color: white;
}

.buttons {
  margin: 5px 5px;
  padding: 10px 100px;
  position: relative;
  border: 2px solid rgb(255, 0, 242);
  border-radius: 10px;
  background: #ffffff00;
  color: rgb(255, 0, 242);
  font-size: 16px;
  cursor: pointer;
  font-weight: normal;
}

.buttons:hover {
  z-index: 1;
  transform: scale(0.95);
  transition: 200ms;
  color: rgb(255, 134, 249);
  border-color: rgb(75, 40, 202);
}

.buttons:active {
  z-index: 1;
  transform: scale(0.9);
  transition: 100ms;
  color: rgb(255, 78, 175);
  border-color: rgb(75, 40, 202);
}

<button class="buttons">button</button>
<button class="buttons">button</button>
<button class="buttons">button</button>