CSS Transformer origine ne fonctionne pas sous firefox

J'ai un CSS question; transform-origin ne fonctionne pas dans firefox. Le site est centré sur chrome et safari, mais pas sur firefox.

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

Mon site est http://test.lafsdesign.com/

Je vous en serais reconnaissant si vous pouviez m'aider à résoudre ce problème.
Je vous remercie beaucoup à l'avance.

CSS complète

@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);
}
}

OriginalL'auteur Love at First Site Design | 2014-08-16

  1. 11

    Dans Firefox avant 41.x avec SVGs, il ne fonctionne que lorsque les valeurs fixes sont utilisés:

    -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 de ne pas gérer par rapport à des valeurs comme la 'centre' ou '50%'.

    Elle n'est pas fixée, pour moi, en FF 48 malheureusement 🙁
    elle n'est pas fixée dans FF 54 ni
    Pas encore fixé dans FF 57
    Ce sujet fenêtre d'affichage des unités comme 50vw?
    même ici, thats quelque chose de flexible en tout genre ne fonctionnent pas correctement. Malheureusement, vous devez utiliser du JavaScript si vous avez besoin de réactivité. Peut-être yoanm de l'idée ci-dessous woks, n'est-ce pas testet il encore.

    OriginalL'auteur Hafenkranich

  2. 4

    Donner de pourcentage au lieu de la position transform-origin: 0% 50%; pour centre et au-dessus.. Une chose de Plus.
    transform-origin n'est pas pris en charge pour les éléments SVG dans Firefox. il y a quelques solutions de contournement pour que. liens: https://bugzilla.mozilla.org/show_bug.cgi?id=828286 Réglage de transformer l'origine sur SVG groupe ne fonctionne pas sous FireFox Comment définir transformer origine en SVG Espère que cela aide

    Khaleel, merci, j'ai vécu à droite ce que vous avez écrit, la transformation ne fonctionne pas pour le SVG pièces dans Firefox (54.0.1 (64 bits) sur mac).

    OriginalL'auteur Khaleel

  3. 3

    Corriger ce bug sur Firefox, vous pouvez utiliser :

    transform-origin: center;
    transform-box: fill-box;

    OriginalL'auteur yoanm

  4. 0

    Transformer l'origine est toujours un problème de compatibilité avec certains navigateurs. Que trop lorsque vous utilisez des mots-clés comme centre, haut, bas, gauche, droite etc.

    Essayer de donner toutes les valeurs en pixels. Tous les navigateurs ne comprennent pixels parfaitement. Et si vous animez des objets aléatoires points d'origine, alors vous pouvez aller à un environnement de conception et de trouver exactement les pixels dont l'origine doit être et le code avec la même valeur exacte pour être précis et compatible avec tous les navigateurs de tous les temps 🙂

    OriginalL'auteur Sowmyanarayanan S