Неожиданный / неправильный размер масштаба для преобразования: масштабировать при увеличении / уменьшении браузера Chrome

Question

Неправильный масштабированный размер встречается в браузерах Webkit, т.е. Chrome, Safari. Я использую Chrome - 68.

Демо: Codepen Link

Код по запросу @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;
}

В приведенной выше ссылке, если вы увеличите или уменьшите масштаб Chrome, вы увидите, что размер шкалы не обязательно соответствует фиксированному размеру .test2 дела. Я ожидаю, что окончательный размер scale(100, 100) быть точно таким же, как тот, с width:100px; height: 100px при масштабировании, но, очевидно, это не так.

Я также проверил это на Retina Mac и ПК. Такое же поведение в Chrome. Однако тот же код протестирован в Firefox и работает правильно.

Это какая-то ошибка или я что-то упустил? Благодарю.

Answer 1

Это ошибка... вызванная тем, что эти браузеры округляют координаты, чтобы избежать сглаживания.

Поэтому, когда вы устанавливаете уровень масштабирования равным 120%, маленький квадрат должен фактически отображаться как квадрат 1.2xx*1.2px до преобразования.

Но браузеры webkit округляют это значение до 1px, даже до того, как они применят преобразование (я думаю, что FF также делает, но, вероятно, после преобразования).

Таким образом, вы не увидите изменения, пока не добьетесь увеличения до 150%, где теперь оно будет округлено до 2px, а ваш синий квадрат станет больше, чем те же 100px * 100px.

Только на 200% они будут совпадать снова.

Ничего не поделаешь, чтобы обойти это, кроме как дать им знать об этом и избегать игры с такими маленькими элементами;-) (использование квадрата 10px*10px и деление уровня трансфокатора на 10 предотвратит эту ошибку).

Answer 2

Зацепил аналогичный случай на мобильном Chrome. Масштабирование значения 1px до некоторой ширины с помощью CSS-преобразования после того, как результат ~100px становится совершенно неправильным и ухудшается по мере продолжения. В моем случае это был элемент управления диапазоном на основе js, где я масштабирую его визуальную часть «прогресс» от 1 пикселя (базовая) до текущей пользовательской позиции touchX с помощью transform: scaleX(touchX);

Мое видение проблемы основано на понимании оценок единиц измерения CSS (https://webplatform.github.io/docs/tutorials/understanding-css-units/): есть своего рода целочисленное уравнение для сглаживания на экранах с дробным окном. устройствоPixelRatio. Android часто имеет DPR 2,3, 2,6, и он может меняться, когда пользователь меняет системные настройки масштабирования дисплея.

Мое решение включает в себя javascript, поэтому может быть неподходящим для вас, но все же может быть полезным:

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