iPad Flicker sur le défilement automatique à l'aide de JQuery et du plugin Scrollto

Question

Je vais avoir un peu d'un problème bizarre avec plate-forme iOS pour une page que je suis en train d'élaborer. Ceci est la page en question. Lorsque vous cliquez sur l'un quelconque de l'étude de cas, les images, la page va d'abord afficher le nécessaire à l'étude de cas, puis faites défiler jusqu'à elle.

Cela fonctionne sur tous les navigateurs de bureau sur Windows et Mac, mais sur l'iPhone et l'iPad, vous obtenez un horrible clignoter comme il se défile vers le bas.

Pas tout à fait sûr de savoir comment déboguer ou résoudre ce problème.

Toutes les idées seront d'une grande aide!

Merci d'avance, Shadi

Mise à JOUR 1

La dernière page peut être trouvé ici. Je n'ai pas encore trouvé un fix - si quelqu'un a une idée ce serait incroyable!

Answer 1

Si vous avez besoin uniquement du défilement vertical, vous pouvez utiliser {'axis':'y'} comme paramètres de la méthode scrollTo.

 $.scrollTo(*selector*, *time*, {'axis':'y'});
 

Answer 2

Avez-vous essayé ceci:

 $('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
 

Answer 3

Si vous êtes juste de défilement de la page à la verticale, vous pouvez remplacer l'ensemble de jQuery scrollTo plugin avec cette simple ligne:

$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');

Personnellement, je fais quelque chose comme ça

$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
  //do stuff
});

J'ai trouvé que si j'essaie de faire d'autres js de travail alors qu'il est de défilement, il rend le navigateur du croquant et de l'animation n'est pas lisse. Mais si vous utilisez la fonction de rappel, il va faire défiler d'abord, puis faire ce que vous avez besoin.

J'ai mis une -15 à la fin de l' .haut parce que je voulais montrer le bord supérieur de la div, j'ai été défilement de le faire, tout simplement pour des raisons esthétiques. 1000 est la durée en millisecondes de l'animation.

Le crédit va à l'affiche, animer, pour le tip off.

Answer 4

Définir {'axe': 'y'} a bien fait les choses! Cela m'a aidé à scintiller slideUp / Down.

Answer 5

Je ne sais pas si cela s'applique à des animations jquery. Mais la suite semble affecter les animations CSS.

http://css-infos.net/property/-webkit-backface-visibility

La syntaxe

-webkit-backface-visibility: visibility;

Paramètres

visibilité Détermine si oui ou non la face arrière de la transformation de l'élément est visible. La valeur par défaut est visible.

modifier

Essayez de l'appliquer à chaque élément et voir ce qui se passe.

*{
 -webkit-backface-visibility: visible;
}

et essayer

*{
-webkit-backface-visibility: hidden;
}

C'est juste une supposition vraiment...