Преобразование масштаба в flexbox отрисовывается по-разному в Chrome и Firefox - PullRequest
Новая
       44

Преобразование масштаба в flexbox отрисовывается по-разному в Chrome и Firefox

0 голосов
/ 03 марта 2019

Я хочу центрировать div, а затем масштабировать его (через transorm: scale), чтобы увеличить его.

Я использую flexbox для центрирования div.Я хочу использовать все пространство просмотра, поэтому я присваиваю элементам HTML и BODY высоту 100%.

В Firefox он хорошо визуализируется.Однако в Chrome масштабирование внутреннего элемента div вызывает переполнение элемента BODY, и появляется вертикальная полоса прокрутки.

Если вы запустите фрагменты ниже в Chrome и Firefox, вы заметите разницу: вертикальныйполоса прокрутки появляется только в Chrome.Я хочу, чтобы это выглядело в Chrome так же, как в Firefox (без полосы прокрутки).

Может кто-нибудь помочь мне разобраться? 

html {
  height: 100%;	  
  background-color: black;     
}

body {
  height: 100%;
  display: flex;
  overflow: auto;
  margin: 0;
  background-color: antiquewhite;
}

div {
  height: 50px;
  width: 50px;
  margin: auto;
  transform: scale(1.7);
  background-color: blue;
}
<html>
  <body>
    <div>
    </div>
   </body>
 </html>

1 Ответ

0 голосов
/ 03 марта 2019

Вместо поля рассмотрим align-items / justify-content для центрирования элемента.Похоже, что Chrome также масштабирует поле, вызывающее эту проблему: 

html {
  height: 100%;
  background-color: black;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: antiquewhite;
}

div.box {
  height: 50px;
  width: 50px;
  transform: scale(1.7);
  background-color: blue;
}
<div class="box">
</div>
...