2012-02-29 1 views
0

J'ai un site Web avec un curseur. Le curseur contient des images ainsi que des vidéos cachées. Lorsque certains "holdframes" sont cliqués, l'image est cachée, puis la vidéo commence à jouer.Le curseur SlidesJS est lent et nerveux sur iOS

Cela fonctionne très bien sur un ordinateur et dans tous les navigateurs. Mais dès que je l'essaie sur iOS, les animations de transition deviennent très lentes et parfois ne se produisent pas du tout. Souvent, sur l'iPad il n'y a pas de transition du tout. Juste une seconde d'espace noir puis la nouvelle diapositive.

J'ai reconstruit le curseur sur un serveur de test avec JUST le curseur. C'est exactement la même chose que sur mon site, mais c'est la seule chose sur la page. Quand je vois cela depuis iOS, ça marche super! Les transitions sont lisses et juste comment je les ai prévues.

Alors cela me conduit à croire qu'il pourrait y avoir quelque chose d'autre sur mon site original qui interfère avec les transitions, mais seulement sur iOS ...

Vous pouvez consulter le site ici. http://optidesign.squarespace.com/projects/motorola-sf700.html

Si quelqu'un peut aller de l'avant et jeter un oeil à essayer de me donner un aperçu, ce serait génial. Sinon, mon idée est de reconstruire lentement le site sur mon serveur de test et de vérifier où il se casse. Ou essayez différents curseurs, mais Slidesjs a fonctionné le mieux pour moi.

Merci

EDIT: Je viens de remarquer un peu intéressant. Si vous cliquez sur le "holdframe" et montrez la vidéo à la place, la transition de cette diapositive à la suivante est lisse! Mais revenir en arrière est toujours brisé, et le reste des diapositives restent brisées ...

Editer: Personne n'a des idées ce qui pourrait être la cause?

Répondre

0

Je crois comprendre que plus il y a d'éléments dans le DOM, plus le javascript sera lent à manipuler le DOM, en particulier lors de la traduction physique/déplacement d'éléments. Cela expliquerait pourquoi le curseur fonctionne bien seul mais trébuche in situ.

Je recommande fortement l'utilisation des transitions CSS pour obtenir l'effet désiré. Consultez cet outil: http://www.idangero.us/sliders/swiper/

CSS transition en combinaison avec transform3d permet le « glissement » des éléments à l'accélération matérielle sur iOS et très lisse.

Questions connexes