Rutschen auf Handy - Problem (Iphone)

Question

Wenn ich meine Website im Handy nach unten/oben rutsche, ist die erste Folie fehlerhaft, sieht aus wie sie in die richtige Richtung gleitet und kommt dann ein paar px in die andere Richtung (aber nur die erste Folie in neue Richtung hat dieses Problem). Ich denke, das bessere Ding ist, es auf einem Handy zu prüfen: https://even-mind.com

Wie kann ich es beheben? Ich hoffe du kannst mir helfen Jungs!

Im Moment, ich das einzige, was zu finden ist owl-carousel.js Skript zu löschen, so wird das Gleiten glatt, aber natürlich Karussell nicht funktioniert, können Sie es hier sehen: https://dev.even-mind.com/Even-Mind

(getestet am iPhone 5)

Answer 1

Nun, ich sehe die Buggy/Laggy Scroll wenn ich die "WE ARE" Folie erreiche.

Es könnte sein, dass die Animationen der fadingIn Texte von dort aus starten und das macht es Buggy, meine Empfehlungen sind:

1- bewegen alle Ihre <link> und <script> Tags am Ende des HTML, kurz nach der </body>, damit der Browser zuerst die HTML-Elemente lädt, dann die Links und Skripte.

2- Entfernen Sie alle unnötigen Animationen, Skripte, Links usw. Zum Beispiel sehe ich nicht den Punkt dieser FadeIn Animationen auf den gesamten Text. Wenn Sie sie nur haben, um die Website aussehen zu lassen, kein Problem, aber ich empfehle die Verwendung von Animationen nur für die Benutzererfahrung Leistung. Beispiel: Verwenden Sie fadeIn oder einen beliebigen Animationstyp für ein bestimmtes Element, das der Benutzer sehen soll. Die Animation sorgt dafür, dass die Augen darauf achten und der Benutzer wird sofort auf die Animation schauen und auf die Informationen achten.

3- Wie immer, minimieren/komprimieren Sie Ihre Skripte, CSS und Bilder.

4- G-zip

5- Verwenden GTmetrix.com, um zu sehen, alles falsch mit Ihrer Website

ich auf den Code aussehen wird mehr und sehen, ob es irgendwelche Code-Probleme sind.

Edit:

Schauen Sie hier: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Feven-mind.com%2F&tab=mobile

Und hier: https://gtmetrix.com/reports/even-mind.com/uVHRlGCl

HINWEIS: Ihre Website ist 3.04MB in Größe, sollten Sie die obigen Anweisungen + Links-Anweisungen zu tun !!!

Answer 2

Wenn Sie in Ihrem DOM-Element-Inspektor nachsehen, können Sie feststellen, dass sich beim Scrollen die Position der Kopfzeile von zu fixed ändert und dies möglicherweise das Problem verursacht.

Dies ist der Header vor Scrollen:

<div id="header" class="header"> 

und nach dem Scrollen:

<div id="header" class="header header-fixed header-prepare"> 

Versuchen Sie, die HTML zu ändern und Ihrem Kopf eine fixed Position von Anfang an geben:

<div id="header" class="header header-fixed"> 

Answer 3

Wie Sie in der DevTools-Timeline-Ansicht sehen können, gibt es viele rote Markierungen oben. Dies deutet auf langsame Frames hin. Wenn Sie sich Screenshots ansehen, können Sie leicht erkennen, dass scroll selbst etwas Unangenehmes an sich hat.

Blick ein wenig tiefer - es gibt 2 mit scroll Ereignis ausgelöst Funktionen:

1. Die erste, Function Call von polyfill.js, die Delegierten der Funktionsausführung zu request (was gut ist)
2. Der zweite, Function Call to jQuery, der die Funktion sofort ausführt.

Was Sie tun können, Ihre Scroll-perf delegiert Funktion 2-requestAnimationFrame zu verbessern. In einer einfachsten Form können Sie mit so etwas gehen:

Die andere Sache ist Variablen Caching. Die Funktion, die Kopfzeilenposition berechnet, durchläuft DOM bei jedem Aufruf. Da DOM-Operationen ziemlich teuer sind, ist es besser, sie zu vermeiden, wenn sie nicht notwendig sind.

var $header = $('.header'); // traverse DOM once, cache variable for later use in function 

function someFunctionUpdatingDOM() { 
    $header.addClass('something'); 
} 

Eine weitere Sache, ich habe bemerkt - es gibt zu blättern perf Probleme auf Desktop-Ansicht, die durch umfangreiche repaints des Hintergrundbildes. Dies wird durch ein Skript verursacht, das background-position ändert, um Parallaxeneffekt zu erzielen. Es ist im Allgemeinen besser, CSS-Transformationen wie translate3d() zu verwenden, die hardwarebeschleunigt sind. Auf diese Weise können Browser Schicht- (Bild-) Transformationen auf die GPU einplanen, unnötige Repaints auslassen und die Seite reibungslos durchlaufen lassen.

Viel Glück mit den Korrekturen!

Answer 4

Es könnte sein, dass der mobile Browser nur einige Probleme mit der Handhabung des Scroll-Ereignisses hat. Verwenden Sie eine Entprellungsfunktion, um die Anzahl der Berechnungen auf Ihrem Bildlauf zu begrenzen, um eine flüssigere Animation zu erhalten und möglicherweise Ihr Bildlaufproblem zu lösen.

Die Entprellfunktion begrenzt die Anzahl der Aufrufe einer Funktion. Sehr praktisch für Scroll-Ereignisse usw.

Ein einfaches Beispiel (von David Walsh Blog): https://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
}; 

Sie können es auf Ihrer Website als solche

var handyScrollFunction = debounce(function() { 
    // put your scroll/parallax in here 
}, 250); 

window.addEventListener('scroll', handyScrollFunction); 

Sie mit dem spielen Timeout, um sicherzustellen, dass die Schriftrolle noch flüssig ist.