Je voulais montrer à quelques uns de nos concepteurs une maquette rapide d'une animation dans jQuery, en particulier celle qui créerait l'apparence d'un objet se déplaçant sous un autre .Les animations jQuery se comportent mal sur Chrome/Safari lorsque l'utilisateur effectue un zoom avant ou arrière
L'exemple que j'ai mis en place a une facture de 100 $ se déplaçant sous un .png transparent de papier avec un trou arraché. Les deux éléments sont configurés avec un positionnement absolu et le papier .png a un indice z plus élevé.
Tout semblait fonctionner correctement, mais j'ai remarqué sur Chrome et Safari que le zoom avant ou arrière rejette le positionnement.
J'ai posté l'exemple ici:
http://tdm-analytics.com/js/examples/example-1.html
Vous remarquerez que si vous effectuez un zoom avant ou arrière et rafraîchir, le positionnement vertical est éteint.
Le code est ici:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script>
<script>
$(document).ready(function() {
$("#100").animate({"top":"-=610px"}, 3000);
});
</script>
</head>
<body>
<div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;">
<img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" />
</div>
<div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;">
<img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" />
</div>
</body>
</html>
Je ne sais pas si cela est quelque chose que j'ai fait de mal ou d'un problème jQuery. Si quelqu'un connaît une solution, je serais très reconnaissant pour l'aide.
Je l'ai vu arriver à beaucoup refroidissent jQuery/Javascript/CSS Animations. Il n'y a pas de contournement facile que je connaisse. – Fred