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

Question

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

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

Это мой CSS:

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

Вот как это должно выглядеть (как в Chrome):

Вот как это не должно выглядеть (как в Firefox):

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

Answer 1

Как упомянуто тридцатка

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

Это поможет.

Answer 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;

Answer 3

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

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