Come faccio a ridurre a zero un elemento utilizzando una transizione CSS su iPhone?

Question

Sto cercando di utilizzare le proprietà proprietarie di iPhone Safari -webkit-transizione e -webkit-transform per far scomparire un elemento con un'animazione aggraziata. Codice:

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

Mi aspetto che l'elemento si riduca a invisibile con un'animazione aggraziata.

Funziona bene su Safari desktop (3.2.1 (5525.27.1) su OS X 10.5.6), ma su iPhone (iPhone OS 2.2.1 (5H11)), il div scompare improvvisamente.

Esiste un modo per far funzionare l'animazione come Documentazione di Apple (è richiesta la registrazione, credo) dice che dovrebbe?

Answer 1

L'impostazione del primo argomento scale su un decimale molto piccolo, anziché su 0, sembra far funzionare l'animazione. Codice:

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

Non sono sicuro che si tratti di un bug di iPhone o meno, ma sembra che sia