¿Cómo hago que un elemento se reduzca a nada usando una transición CSS en el iPhone?

Question

Estoy tratando de usar las propiedades patentadas de iPhone Safari -webkit-transition y -webkit-transform para hacer que un elemento desaparezca con una animación elegante. 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>

Esperaría que el elemento se reduzca a invisible con una animación elegante.

Esto funciona bien en Safari de escritorio (3.2.1 (5525.27.1) en OS X 10.5.6), pero en el iPhone (iPhone OS 2.2.1 (5H11)), el div simplemente desaparece abruptamente.

¿Hay alguna forma de hacer que la animación funcione como Documentación de Apple (creo que es necesario registrarse) dice que debería hacerlo

Answer 1

Establecer el primer argumento scale en un decimal muy pequeño, en lugar de 0, parece hacer que la animación funcione. 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>

No estoy seguro de si se trata de un error de iPhone o no, pero parece que sí.