Pixel offset on a CSS button in Windows with 125% scaling (without affecting user zoom)

Question

I'm encountering a pixel offset issue with my CSS button rendering on certain screen resolutions. On a laptop with the default display scaling of 125% in Windows, some elements of the button aren't aligned properly, resulting in a slight 1-pixel offset between elements.

I designed a button with several lines (using elements) positioned absolutely, but depending on the display scaling, the lines sometimes appear with inconsistent thicknesses (3px vs. 4px). The issue seems to be related to the display scaling in Windows, but I can't find a CSS solution that fixes it without affecting the appearance of the site or forcing the user to change their display scaling (zoom).

$(document).on('click', 'header button.container_btn_contact', function() {
  console.log('test contact');
  el = $(this);
  el.toggleClass('active');
  if ($(document).find('header div.container_menu_contact div.container_sign img').length < 1) {
    url_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-src');
    class_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-class');
    alt_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-alt');
    title_sign = $(document).find('header div.container_menu_contact div.container_sign').attr('data-title');
    $(document).find('header div.container_menu_contact div.container_sign').append('<img class="'+class_sign+'" alt="'+alt_sign+'" title="'+title_sign+'" src="'+url_sign+'">');
  }

  $(document).find('div[data-background').each(function() {
    $(this).css('background-image', 'url('+$(this).attr('data-background')+')');
  });
  if ($(document).find('header div.container_menu_principal').hasClass('is_open')) {
    $(document).find('header div.container_menu_principal').removeClass('is_open').addClass('is_closed');
    $(document).find('header button.container_btn_menu').removeClass('active')
  }
  if($(document).find('header div.container_menu_contact').hasClass('is_open')){
    $(document).find('header div.container_menu_contact').removeClass('is_open').addClass('is_closed');
    $('body').css({'overflow-y': 'auto'});
    $('body').removeClass('menu_open');
  }
  else{
    $(document).find('header div.container_menu_contact').removeClass('is_closed').addClass('is_open');
    $(document).find('div.container_sign').addClass('animate_ouverture');
    setTimeout(function(){
      $(document).find('div.container_sign').removeClass('animate_ouverture');
    },3200);
    $(document).find('header div.container_menu_principal').removeClass('is_open').addClass('is_closed');
    $('body').css({'overflow-y': 'hidden'});
    $('body').addClass('menu_open');
  }
});

button.container_btn_contact {
  background: none;
  border: none;
  display: inline-flex;
  position: relative;
  width: 55px;
  height: 60px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

button.container_btn_contact div.button_contact {
  height: 15px;
  width: 15px;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all ease-in-out .25s;
  position: relative;
  display: block;
}

button.container_btn_contact div.button_contact span {
  position: absolute;
  top: 0;
  width: 3px;
  height: 15px;
  background: #000;
  opacity: 1;
  transition: all ease-in-out .25s;
  display: inline-block;
}

button.container_btn_contact div.button_contact span:nth-child(1) {
  left: 0;
}

button.container_btn_contact div.button_contact span:nth-child(2) {
  left: 6px;
  height: 8px;
  top: 7px;
}

button.container_btn_contact div.button_contact span:nth-child(3) {
  left: 6px;
  height: 4px;
}

button.container_btn_contact div.button_contact span:nth-child(4) {
  left: 12px;
}

button.container_btn_contact.active div.button_contact {
  transform: rotate(90deg);
  transition: all ease-in-out .25s;
}

button.container_btn_contact.active div.button_contact span:nth-child(1) {
  transform: rotate(-45deg);
  left: 4px;
  transition: all ease-in-out .25s;
}

button.container_btn_contact.active div.button_contact span:nth-child(2) {
  top: 0px;
  opacity: 0;
  transition: all ease-in-out .25s;
}

button.container_btn_contact.active div.button_contact span:nth-child(3) {
  top: 5px;
  opacity: 0;
  transition: all ease-in-out .25s;
}

button.container_btn_contact.active div.button_contact span:nth-child(4) {
  transform: rotate(45deg);
  left: 4px;
  transition: all ease-in-out .25s;
}

button.container_btn_contact.is_open div.contact span:nth-child(1) {
  transform: rotate(45deg) translate(-50%, -50%);
  left: calc(50% + -3px);
  top: calc(50% + 5.25px);
  transition: ease-in-out all .25s;
}

button.container_btn_contact.is_open div.contact span:nth-child(2) {
  transform: rotate(-45deg) translate(-50%, -50%);
  left: calc(50% + 0px);
  top: calc(50% + -5.25px);
  transition: ease-in-out all .25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<header>
  <button class="container_btn_contact" name="btn_menu_contact" aria-label="btn_menu_contact" height="60" width="60">
    <div class="button_contact" title="Contact" alt="Contact" height="20" width="20">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>
</header>

Any suggestions on how to resolve this issue without modifying the overall zoom or display scaling of the site? Any help or ideas would be greatly appreciated!

Problem: On specific resolutions, the lines have uneven thicknesses, some appear to be 3px while others are 4px. The issue only seems to occur when the screen scaling is set to 125% on Windows (laptop). I don't want to affect the users' zoom or reduce the zoom level of the site.

What I've tried: Adding CSS properties like transform, will-change, and translateZ(0) to force more precise rendering, but it didn't solve the offset issue. Playing with absolute and relative sizes in CSS (e.g., using calc(), devicePixelRatio, etc.), but it didn't fix the offset.