Est-ce que CSS3 Transform sur Firefox 3.6 est stable?

J'ai implémenté une transformation CSS3 d'une image où je la redimensionne et la traduis. Lorsque je survole l'image pour la transformer, l'image résultante clignote parfois ou n'apparaît pas. Je dois déplacer la souris un peu pour que ça colle. Est-ce un problème avec mon code ou l'implémentation dans Firefox 3.6?Est-ce que CSS3 Transform sur Firefox 3.6 est stable?

html:

<a class="image-transform" href="#" title="William and Catherine"><img src="images/William_Walter_and_Catherine_Rowe.jpg" alt="William Walter and Catherine Rowe"/></a>

css:

.image-transform img 
{ 
    float:right; 
    width: 75px; 
    background-color: #ffffff; 
    margin: 1em 1em 1em 1em; 
    padding: 3px; 
    border: solid 1px; 
    -moz-box-shadow: 5px 5px 5px #888; 
    -o-box-shadow: 5px 5px 5px #888; 
    -webkit-box-shadow: 5px 5px 5px #888; 
    box-shadow: 5px 5px 5px #888; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 
.image-transform:hover img 
{ 
/* width: 300px;*/ 
    -moz-transform: scale(4) translate(-60px); 
    -webkit-transform: scale(4) translate(-60px); 
    -o-transform: scale(4) translate(-60px); 
    transform: scale(4) translate(-60px); 
}

Cette page de production est à: http://www.amcolan.info/Rowe/rowe.php. C'est la seule petite photo sur la bonne marge. J'ai utilisé une solution javascript sur une autre page qui fonctionne bien, mais j'ai pensé que j'essaierais CSS3.

Merci pour toute aide.

Source

2011-03-20 curt

Par votre commentaire dans la question: J'ai corrigé votre deuxième bloc de code. Vous devez [mettre en retrait avec quatre espaces] (http://stackoverflow.com/editing-help). Vous pouvez le faire en sélectionnant le texte, puis en cliquant sur le bouton '{}'. – thirtydot

En outre, ce lien est cassé. – thirtydot

Merci de votre correction. Je suppose que vous avez également corrigé le lien. Cela a fonctionné pour moi. – curt

La raison est vraiment très simple. Jetez un oeil à cette image:

The end and start point of the animation overlayed over each other

Voir, lorsque vous passez la souris sur l'élément, le sélecteur :hover prend effet, et il se dilate et se traduit, éloignant ainsi de votre souris. Maintenant que l'élément est et non sous votre souris, le sélecteur :hover ne prend pas effet, et l'élément revient à la position d'origine, sous votre souris. Le cycle se répète ensuite. Maintenant, les transitions CSS ne sont pas supportées dans Firefox 3.6, donc cela se passe instantanément, ou aussi vite que le navigateur peut repeindre l'écran, donc il semble flasher ou flasher. La solution consiste à s'assurer que l'élément est toujours sous la souris pendant toutes les parties de l'animation ou, alternativement, à utiliser JavaScript, d'où vous pouvez utiliser les événements et les files d'attente pour obtenir un contrôle plus précis de l'animation.

Source

2011-03-20 07:57:26

Votre explication aurait du sens si elle n'arrêtait jamais de scintiller. Je peux l'arrêter en déplaçant lentement le pointeur de la souris sur l'image originale. À ce moment-là, le pointeur indique où était l'image. – curt

Néanmoins, j'ai modifié la traduction de sorte que l'image agrandie est restée sur l'original et il est devenu stable. Donc, à la fin, vous m'avez donné une solution. – curt

Est-ce que CSS3 Transform sur Firefox 3.6 est stable?

Répondre

Questions connexes