Problème de mise à l'échelle avec -webkit-transform avec safari mobile sur iPad

Dans la page HTML ci-dessous, je redimensionne un bloc avec un -webkit-transform. La transformation met à l'échelle le bloc de sa taille initiale à sa taille double.Problème de mise à l'échelle avec -webkit-transform avec safari mobile sur iPad

Cela fonctionne comme prévu avec Safari et Chrome sur OSX. Mais, sur l'IPad (à la fois le simulateur et l'appareil), la mise à l'échelle commence à partir d'un seul point au lieu de la taille d'origine de l'image.

Comme vous pouvez le voir dans l'exemple, j'ai mis la balise META viewport, mais elle ne fait rien.

Quelqu'un peut-il confirmer cela comme un bug, et y a-t-il une solution de contournement?

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" /> 

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    } 

.zoom { 
    -webkit-transform: scale(2); 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Source

2010-09-17 andersjanmyr

J'ai réussi à résoudre le problème moi-même.

La solution est simple: il suffit que l'élément est mis à l'échelle à sa taille d'origine pour commencer:

-webkit-transform: scale(1);

Il y a une astuce pour, cependant. Si vous, comme je l'ai ci-dessous, ajoutez une classe à un élément sélectionné par #id, le #id a une priorité plus élevée que la classe et il ne montrera pas à moins que vous dites au navigateur qu'il est important

-webkit-transform: scale(2) !important;

Une alternative Le moyen de résoudre ceci est de ne pas sélectionner l'élément par #id mais par class (.block) ou par élément (div). Quelque chose avec une priorité inférieure à un ID.

Solution suit:

<style type="text/css"> 

#block { 
    position:absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 400px; 
    -webkit-transition: -webkit-transform 3s ease-out; 
    background-color: blue; 
    -webkit-transform: scale(1); 
    } 

.zoom { 
    -webkit-transform: scale(2) !important; 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html>

Source

2010-09-20 09:01:55 andersjanmyr

Cela a fait une telle différence, en ajoutant simplement l'échelle (1), merci monsieur! –

Juste ce que je cherchais. Merci beaucoup. – mapr

pour moi ajoutant l'échelle 1 n'était pas la solution mais mon état de début et de fin a eu une transformation sans -webkit en face d'elle. Donc, votre message m'a aidé à comprendre cela. – Mattijs

je suis tombé sur cette question très tard. La solution était sans utiliser important, et en changeant la façon de sélectionner un élément. Cela est dû au fait que le sélecteur d'ID est plus proche et plus puissant que le sélecteur de classe.

#block.zoom { 
    -webkit-transform: scale(2); 
}

Source

2017-03-10 19:03:43

Problème de mise à l'échelle avec -webkit-transform avec safari mobile sur iPad

Répondre

Questions connexes