Problema de escala com -webkit-transform com safari móvel no iPad

Question

Sep 17, 2010, 01:03 PM

Problema de escala com -webkit-transform com safari móvel no iPad

Na página HTML abaixo, estou dimensionando um bloco com um-webkit-transform. A transformação dimensiona o bloco do tamanho inicial para o tamanho duplo.

Isso funciona como esperado com o Safari e o Chrome no OSX.

Porém, no IPad (tanto no simulador quanto no dispositivo), a escala começa em um único ponto, em vez do tamanho original da imagem.

Como você pode ver no exemplo, eu configurei oviewport meta tag, mas não faz nada.

Alguém pode confirmar isso como um bug e existe uma solução alternativa?

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