Skalierungsproblem mit -webkit-transform mit mobiler Safari auf dem iPad

Question

Sep 17, 2010, 01:03 PM

Skalierungsproblem mit -webkit-transform mit mobiler Safari auf dem iPad

In der HTML-Seite unten skaliere ich einen Block mit einem-webkit-transform. Die Transformation skaliert den Block von seiner ursprünglichen Größe auf seine doppelte Größe.

Dies funktioniert erwartungsgemäß mit Safari und Chrome unter OSX.

Aber auf dem IPad (sowohl auf dem Simulator als auch auf dem Gerät) beginnt die Skalierung an einem einzelnen Punkt anstelle der Originalgröße des Bildes.

Wie Sie im Beispiel sehen können, habe ich das @ gesetviewport meta tag, aber es macht nichts.

Kann jemand bestätigen, dass dies ein Fehler ist, und gibt es eine Problemumgehung?

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