Como posso fazer uma escala elemento para baixo a nada usando uma transição CSS no iPhone?

Question

Eu estou tentando usar a proprietária iPhone Safari propriedades -webkit-transition e -webkit-transform para fazer um elemento desaparecer com uma animação graciosa. Código:

<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>

<script type="text/javascript">
    function shrinky() {
        this.style.webkitTransform = 'scale(0,1)';
    }

    document.getElementById('right').onclick = shrinky;
</script>

eu esperaria o elemento a encolher até invisível com uma animação graciosa.

Esta multa trabalha na área de trabalho Safari (3.2.1 (5525.27.1) no OS X 10.5.6), mas no iPhone (iPhone OS 2.2.1 (5H11)), o div simplesmente desaparece abruptamente.

Existe alguma maneira de fazer o trabalho de animação como documentação da Apple (registro obrigatório, eu acho) diz que deveria?

Answer 1

Definir o primeiro argumento scale a uma pequena decimal, em vez de 0, parece fazer o trabalho de animação. Código:

<div id="right" style="font-size: 500%; text-align: center; background-color: #fdf; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s;">3</div>

<script type="text/javascript">
    function shrinky() {
        this.style.webkitTransform = 'scale(0.000001,1)';
    }

    document.getElementById('right').onclick = shrinky;
</script>

Não sei se isso é um bug do iPhone ou não, mas parece que ele.