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

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

0 голосов
/ 04 сентября 2018

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

Демо: Ссылка Codepen

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

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

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

Это какая-то ошибка или я что-то упустил? Спасибо.

1 Ответ

0 голосов
/ 04 сентября 2018

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

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

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

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

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

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

...