web-dev-qa-db-fra.com

Lors de l'utilisation de CSS Scale dans Firefox, l'élément conserve la position d'origine.

Lors de l'utilisation de l'échelle dans Firefox, l'élément mis à l'échelle est correctement mis à l'échelle. Le problème est qu'il est positionné comme s'il n'était pas mis à l'échelle. 

Cela fonctionne très bien dans Chrome, et probablement aussi dans IE, Safari et Opera. Ces navigateurs prennent tous en charge la propriété de zoom CSS, contrairement à Firefox. Pour Firefox, j'utilise -moz-transform: scale (0.3) ;.

C'est mon CSS:

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

Voici à quoi cela devrait ressembler (comme dans Chrome):

zoom in chrome

Voici à quoi cela ne devrait pas ressembler (comme dans Firefox): scale in firefox

Est-ce que quelqu'un sait comment réparer ceci? Ou peut-être une solution de contournement?

cssfirefoxzoomscale
19
Thomas

Comme thirtydot mentionné:

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

Ça fera l'affaire.

32
borisrorsvort

J'ai ajouté -transform-Origin: 0 0; et cela n'a toujours pas fonctionné.

D'une manière ou d'une autre, dans Chrome, il s'est réduit à -webkit-transform-Origin: 0;

Alors je l'ai changé pour -transform-Origin: en haut à gauche; et cela fonctionne bien maintenant.

Code complet:

-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;
5
scabbiaza

Si le positionnement absolu n'est pas une option - et conscient de la compatibilité du navigateur - display: table-cell avec une définition min-width, devrait faire l'affaire, pourrait également faire l'affaire.

Par exemple. Cela m'a permis de créer une ligne avec les logos de clients évoluant bien à travers différentes résolutions d'écran.

1
stackasec