Chromium bug when input has focus and affects hyperlink text font weight on black background

Question

I found a slight glitch in the hyperlink anchor tag text block. When you have a black background and have focus on an input and a hyperlink to the right or underneath it, the font weight for every hyperlink text changes the weight to be thinner. I provided an example on codepen so have a look and follow the simple instructions and see if there is the same problem on your browser. I have tested this in Microsoft Edge and Chrome and get the same result. I created a simple example and you could change it and make it even more simple and just have a input and hyperlink to the right of the input. Check it out and tell me if there is a work around for this problem.

body {
  background-color: black;
  display: grid;
  justify-items: center;
  align-items: center;
  margin: 0;
  font-family: sans-serif;
  color: white;
  height: 100vh;
}

h1 {
  font-weight: 300;
  margin-top: 0;
}

.box {
  padding: 4rem;
  border: 1px solid gray;
  max-width: 400px;
  border-radius: 4px;
}

.grid {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 1rem;
}

input {
  padding: 12px;
  background-color: black;
  border: 1px solid gray;
  border-radius: 4px;
  color: white;
}

a {
  font-weight: 400;
}

#fname:focus {
  outline: none;
  outline-offset: 0;
}

#lname:focus {
  outline: 1px solid blue;
  outline-offset: -1px;
}

<div class="box">
  <h1>Chromium Cursor Bug On Input Focus:</h1>
  <p>Put the cursor in the text box and watch the text font-weight change in every link to the right and underneath the textbox. This is a <a href="#">default link</a> style example, You can see this evidently on a black background.</p>
  <div class="grid">
    <input type="text" id="fname" placeholder="First Name" autocomplete="off" list="autocompleteOff" value="John">
    <a href="#">Link 1</a>
    <input type="text" id="lname" placeholder="Last Name" autocomplete="off" lis="autocompleteOff" value="Doe">
    <a href="#">Link 2</a>  
  </div>
  <br><a href="#">Every Other Link</a>
</div>