Skalierung problem mit -webkit-transform mit mobile safari auf dem iPad

In der HTML Seite unten, ich bin Skalierung wird ein block mit einer -webkit-transform. Die Skalen transformieren den block von der ursprünglichen Größe zu seiner doppelten Größe.

Diese wie erwartet funktioniert mit Safari und Chrome auf OSX.

Aber auf dem IPad (simulator und Gerät), die Skalierung von einem Punkt ausgehen, anstatt die ursprüngliche Größe des Bildes.

Wie Sie im Beispiel sehen können ich habe den viewport meta-tag, aber es tut sich nix.

Kann das jemand bestätigen dies wie ein bug, und gibt es eine Abhilfe?

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

InformationsquelleAutor andersjanmyr | 2010-09-17

  1. 13

    Habe ich es geschafft das problem zu lösen mich selbst.

    Die Lösung ist einfach: stellen Sie einfach sicher, dass das element skaliert auf die ursprüngliche Größe zu beginnen mit:

    -webkit-transform: scale(1);

    Gibt es einen trick, um es, wenn. Wenn Sie, wie ich unten, fügen Sie eine Klasse zu einem ausgewählten element #id, #id hat eine höhere Priorität als die Klasse, und es wird nicht zeigen, es sei denn, Sie sagen dem browser, dass es wichtig ist

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

    Einen alternativen Weg, um dieses Problem zu lösen ist es, nicht wählen Sie das element #id, aber durch die Klasse (.block) oder durch das element (div). Alles, was mit einer niedrigeren Priorität als eine id.

    Lösung folgt:

    <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>
    Dies machte einen so großen Unterschied, einfach hinzufügen-Skala(1), ich danke Ihnen, sir!
    Genau das, was ich suchte. Dank so viel.
    für mich der Skalierung 1 war nicht die Lösung, aber meine start-und end-Staat hatte eine transform-ohne -webkit-davor. Also dein Beitrag hat mir geholfen, dies herauszufinden.

    InformationsquelleAutor andersjanmyr

  2. 0

    Kam ich über diese Frage sehr spät. Die Lösung wurde ohne Verwendung important und durch die Veränderung der Art und Weise der Auswahl eines Elements. Dies ist aufgrund der Grund, dass der ID-Selektor ist näher und stärker als die Klassen-Selektor.

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

    InformationsquelleAutor Vishal Kumar Sahu

Schreibe einen Kommentar