Safari...

Bonjour,

Je teste un peu Safari pour des menus animés. Il semblerait que ce dernier bloque sur un redimensionnelement d'image.

Pour l'exemple, j'ai une image de 125*125. Je l'affiche sur une page html avec le style suivant : { width: 85px; height: 85px; padding: 20px }

Je veux, lorsque je clique sur l'image en question que celle-ci s'agrandisse.
Dès lors je fais une boucle dans le temps avec setInterval et jusqu'à ce que le "padding" vaille "0px" j'exécute les instructions suivantes :

var img = document.getElementById('imagetest');
img.style.padding = --padding + 'px';
var size = maxSize-(padding*2);
img.style.width = size + 'px';
img.style.height = size + 'px';

Alors ça marche fort bien sous Firefox, Opera et IE mais sous Safari, ça affecte bien le padding mais jamais la largeur ni la hauteur, sauf lorsque la boucle se termine il prend la valeur finale. Ce qui donne comme effet une image qui monte puis qui s'agrandit d'un seul coup.

J'ai trouvé un truc pour que ça force Safari à affecter la bonne taille mais c'est vraiment pas top :

if(navigator.userAgent.match(/Safari/))
{
    while(img.width != size || img.height != size)
    {
        img.style.width = size + 'px';
        img.style.height = size + 'px';
    }
}
else
{
    img.style.width = size + 'px';
    img.style.height = size + 'px';
}

Bref, avez-vous déjà rencontré ce problème ? Avez-vous une idée de comment faire pour que le redimmensionnement d'une image fonctionne correctement ?

Merci,
Seb

Je n'ai pas très bien compris pourquoi tu joue sur le padding pour redimensionner l'image mais sinon tu peux utiliser une librairie qui fait déjà très bien ce genre de choses, par exemple Scriptaculous ou MooTools.