How to prevent edges anti-aliasing on element with css transform in Chrome

Question

I have absolutely positioned blocks which are centered using transformation:

 left: 50%;
 top: 50%; 
 transform: translate(-50%, -50%);

I noticed that Chrome applies some sort of antialiasing on such blocks when they have odd height - edges of such blocks become semi-transparent.

In the example below block "A" is centered vertically via flex, block "B" is positioned absolutely and centered using transformation.

.container {
  position: relative;
  width: 150px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.a, .b{
  width: 50px;
  height: 37px;
  background-color: red;
}

.a {
  margin-left: 15px;
}

.b {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%); 
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>

Under closer inspection you can notice that block "B" obtains semi-transparent edges at the top and at the bottom, when block "A" doesn't.

I checked it in Firefox and there's no such effect on absolutely positioned blocks. Is it possible to tell Chrome not to apply such effect? Or is there other way to center the absolutely positioned block so that this effect won't appear?

Answer 1

i tried for you

.container {
  position: relative;
  width: 150px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.a {
  display: flex;
  align-items:center;
  justify-content: center;
  position: absolute;
  width: 50px;
  height: 37px;
  background-color: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
}

<div class="container">
  <div class="a">A</div>
</div>

chrome browser scaled chrome browser