При использовании CSS Scale в Firefox элемент сохраняет исходное положение

При использовании шкалы в Firefox масштабированный элемент получает правильную масштабирование. Проблема в том, что он позиционируется так, как будто он не масштабируется.

Это отлично работает в Chrome и, вероятно, также в IE, Safari и Opera. Эти браузеры поддерживают свойство масштабирования CSS, в котором Firefox не работает. Для Firefox я использую -moz-transform: scale (0.3);.

Это мой CSS:

#overview .page-content {
    zoom: 0.3;
    -moz-transform: scale(0.3);
}

Это то, что должно выглядеть (как в Chrome):

Это то, что не должно выглядеть (как в Firefox):

Кто-нибудь знает, как это исправить? Или, может быть, обходной путь?

Ответы

Ответ 1

Как thirtydot упоминается:

position: absolute;
-moz-transform-origin: 0 0;

Это сделает трюк.

Ответ 2

Я добавил -transform-origin: 0 0; и это все еще не сработало.

Как-то в Chrome он упал до -webkit-transform-origin: 0;

Итак, я изменил его на -transform-origin: верхний левый; и теперь он отлично работает.

Полный код:

-moz-transform: scale(50%);
-moz-transform-origin: top left;
-o-transform: scale(50%);
-o-transform-origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-origin: top left;

Ответ 3

Если абсолютное позиционирование не является опцией - и известно о соответствующей поддержке браузера - display: table-cell с определением min-width, должно быть, может также сделать трюк.

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