Sliding on mobile issue (Iphone)

Question

When I slide down / up my website in mobile, the first slide is buggy, looks like it slides in the right direction and then comes back a few px to the other direction (but only the first slide in NEW direction has this issue). I think the better thing is to test it on a mobile phone: https://even-mind.com

How can I fix it? I hope you can help me guys!

For the moment, the only thing i found is to delete owl-carousel.js script, so the sliding becomes smooth but of course carousel isn't working, you can see it here: https://dev.even-mind.com/Even-Mind

(tested on iphone 5)

Answer 1

By looking in your DOM elements inspector you can find out that while scrolling down the position of the header changes from absolute to fixed and maybe this is what causes the issue.

This is the header before scrolling:

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

and after scrolling:

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

Try to change the HTML and give your header a fixed position from the start:

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

Answer 2

Well, I see the buggy/laggy scroll when I reach the "WE ARE" slide.

It might be that the animations of the fadingIn texts start from there and that makes it buggy, my recommendations are:

1- move all your <link> and <script> tags at the bottom of your HTML, just after the </body> to let the browser load the HTML elements first then the links and scripts.

2- Consider removing any unnecessary animations, scripts, links, etc. For example, I don't see the point of these fadeIn animations on all of the text. If you have them just to make the website fancy looking not a problem, but I recommend using animations just for user-experience performance. Example: Use the fadeIn or any type of animation on a specific element that you want the user to see. The animation makes the eyes pay attention to it and the user will look at the animation right away and pays attention the info.

3- As always, minify/compress your scripts, CSS, and images.

4- G-zip

5- Use GTmetrix.com to see everything wrong with your website

I will look at your code more and see if there are any code problems.

Edit:

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

And here: https://gtmetrix.com/reports/even-mind.com/uVHRlGCl

NOTE: Your website is 3.04MB in size, consider doing the above instructions + links instructions!!!

Answer 3

It could be that the mobile browser has just some issues with handeling the scroll event. Try using a debounce function to limit the number of calculations on your scroll to make for a smoother animation and maybe solve your scroll issue.

The debounce function limits the number of times a function gets called. Very handy for scroll events etc.

A basic example (from David Walsh's 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);
    };
};

You can use it on your site as such

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

window.addEventListener('scroll', handyScrollFunction);

You can play with the timeout to make sure the scroll is still smooth.