CSS变换原点在Firefox中无效

Question

我有一个CSS问题；transform-origin在firefox中无效。该网站在chrome和safari上居中，但在firefox上不居中。

html {
transform: scale(0.9);
transform-origin: center top;
}

我的网站是http://test.lafsdesign.com/

如果您能帮我解决这个问题，我将不胜感激。

完整的CSS：

@media screen and (max-width: 1240px) {
html {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: center top;
}
}
@media screen and (max-width: 1140px) {
html {
zoom: 0.8;
-moz-transform: scale(0.8);
}    
}
@media screen and (max-width: 1005px) {
html {
zoom: 0.7; 
-moz-transform: scale(0.7);
}
}
@media screen and (max-width: 880px) {
html {
zoom: 0.6; 
-moz-transform: scale(0.6);
}
}

- Love at First Site Design

Answer 1

在Firefox 41.x之前使用SVG时，只有在使用固定值时才能正常工作。

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Firefox 不支持像 'center' 或 '50%' 这样的相对值。

- Hafenkranich

---

很不幸，对我来说在FF 48中仍然没有解决。 - F Lekschas

它在 Firefox 54 中也没有固定。 - JSmith

在Firefox 57中仍未修复。 - AlbertSamuel

@IlyaStreltsyn 我也一样，任何形式的灵活性都无法正常工作。不幸的是，如果您需要响应能力，则必须使用JavaScript。也许yoanm下面的想法可以，我还没有测试过。 - Hafenkranich

这解决了我的问题，如果你想要使用Qtwebkit引擎进行htmlToPdf转换。 - mslugx

Answer 2

给予百分比而非位置 transform-origin: 0% 50%; 可以实现居中靠上的效果。但是需要注意的是，在 Firefox 中，SVG 元素不支持 transform-origin 属性。不过有一些解决方法可以尝试。链接如下：https://bugzilla.mozilla.org/show_bug.cgi?id=828286、Setting transform-origin on SVG group not working in FireFox、How to set transform origin in SVG 希望对你有所帮助。

- Khaleel

---

Khaleel，谢谢，我已经亲身体验了你所写的内容，转换在Firefox（54.0.1（64位）Mac版）中无法处理SVG部件。 - Rantiev

Answer 3

要在火狐浏览器中修复此错误，您可以使用以下样式代码： transform-origin: center; transform-box: fill-box; 这些代码将帮助调整元素的转换原点和转换框。

- yoanm

Answer 4

转换原点始终是某些浏览器的兼容性问题。特别是当您使用诸如center、top、bottom、left、right等关键词时。

尝试以像素为单位给出所有值。所有浏览器都能完美理解像素。如果您正在从随机原点位置动画化对象，则可以进入设计环境并找到必须存在的确切像素位置，以便准确编码并与所有浏览器兼容。

- Sowmyanarayanan S