Comment réduire un élément à zéro en utilisant une transition CSS sur l'iPhone?

Question

J'essaie d'utiliser les propriétés propriétaires de l'iPhone Safari -webkit-transition et -webkit-transform pour faire disparaître un élément avec une animation gracieuse. Code:

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

Je m'attendrais à ce que l'élément se rétrécisse à invisible avec une animation gracieuse.

Cela fonctionne très bien sur le bureau Safari (3.2.1 (5525.27.1) sur OS X 10.5.6), mais sur l'iPhone (iPhone OS 2.2.1 (5H11)), le div disparaît brusquement.

Y at-il un moyen de faire fonctionner l'animation comme Apple’s documentation (registration required, I think) dit qu'il devrait?

Answer 1

La définition du premier argument scale sur une très petite décimale, plutôt que sur 0, semble faire fonctionner l'animation. Code:

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

Vous ne savez pas si c'est un bug de l'iPhone ou non, mais il semble que ce soit le cas.