Unexpected/Incorrect scale size for transform: scale" when zoom in/out chrome browser

The incorrect scaled size happens in Webkit browsers, i.e. Chrome, Safari. Chrome version I am using is 68.

Demo: Codepen Link

Code as requested by @Kaiido

HTML:

<div class="test1"></div>
<div class="test2"></div>

CSS:

.test1 {
  z-index: 100;
  position: fixed;
  top: 10px; 
  left: 10px;
  width: 1px; 
  height: 1px;
  background: blue;
  transform-origin: top left;
  transform: scale(100, 100);
}

.test2 {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100px; 
  height: 100px;
  background: red;
}

In the link above, if you zoom in/out of chrome, you would see the scale size does not necessary match the fixed size of the .test2 div. I would expect the final size of the scale(100, 100) to be exactly the same as the one with width:100px; height: 100px upon scaling but obviously this is not the case.

I have also tested this in both retina mac and pc. It is the same behavior in Chrome. However same code is tested in Firefox and is working correctly.

Is this some sort of bug or am I missing something? Thanks.

It is a bug... caused by the fact these browsers round coordinates to avoid antialiasing.

So when you set your zoom level to 120%, the small square should actually be rendered as a 1.2px*1.2px square prior transform.

But webkit browsers will round this value to 1px, even before they apply the transformation (I think FF also does but probably after transform).

So you won't see a change until you get to zoom 150%, where now it will get rounded to 2px and your blue square will get bigger than the same 100px*100px.

Only at 200% will they match again.

Not much to do to circumvent this, apart letting them know, and avoiding playing with such small elements ;-) (using a 10px*10px square and dividing the transform zoom level by 10 would prevent this bug).