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

Admin 1
Viewed 1438

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.

scaletransform css-transforms google-chrome css
2 Answers

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).

user_37027970

Have caught similar case on mobile Chrome. Scaling 1px value to some width by CSS transform after ~100px result become totally wrong and become worser as continue. In my case this was a js-based range control, where I scale its 'progress' visual part from 1px (base) to current user touchX position by transform: scaleX(touchX);

My vision of problem is based on understanding of CSS units evaluations (https://webplatform.github.io/docs/tutorials/understanding-css-units/): there is sort of eager integer equation for antialiasing on screens with fractional window.devicePixelRatio. Android often has a 2.3, 2.6 DPRs, and it may changes when user changes display's zoom system settings.

My solution involves javascript, so may be inappropriate for you, still may be useful:

fixedWidth = (devicePixelRatio * originalWidth) / Math.round(devicePixelRatio);
user_22202600
Related