When I slide down / up my website in mobile, the first slide is buggy, looks like it slides in the right direction and then es 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:

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 bees smooth but of course carousel isn't working, you can see it here:

(tested on iphone 5)

When I slide down / up my website in mobile, the first slide is buggy, looks like it slides in the right direction and then es 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.

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 bees smooth but of course carousel isn't working, you can see it here: https://dev.even-mind./Even-Mind

(tested on iphone 5)

• javascript
• html
• css
• twitter-bootstrap
• mobile

• check your console errors. Uncaught TypeError: $ is not a function. Your site isn't loading for me on Chrome desktop. – s0rfi949 Commented Sep 1, 2016 at 23:23
• I can't see any errors on the console in chrome.. – wander Commented Sep 1, 2016 at 23:25
• Ahh, I disabled my adblock extension and now the site is loading... – s0rfi949 Commented Sep 1, 2016 at 23:28
• 1 I am not able to see the issue on your link. Also there is no code, so even if we can see the issue on your link, we cannot see the code so how do you want us to provide a solution? – Ruben Pirotte Commented Sep 5, 2016 at 10:17
• right click > source code. The issue is only on iphone I think. Just in case of somebody had the same issue. – wander Commented Sep 5, 2016 at 12:28

4 Answers 4

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">

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 remendations 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 remend 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/press your scripts, CSS, and images.

4- G-zip

5- Use GTmetrix. 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./speed/pagespeed/insights/?url=https%3A%2F%2Feven-mind.%2F&tab=mobile

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

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

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.

As you can see from the DevTools Timeline view, there are lots of red marks at the top. These indicates slow frames. Looking at screenshots, you can easily tell there's something nasty about scroll itself.

Looking a little deeper – there are 2 functions fired with scroll event:

1. The first one, Function Call from polyfill.js, which delegates the function execution to requestAnimationFrame (which is good)
2. The second one, Function Call to jQuery which executes function immediately.

What you can do to improve your scroll perf is delegating function 2 to requestAnimationFrame. In a simplest form you can go with something like this:

$(window).scroll(function() {
  requestAnimationFrame(someFunctionUpdatingDOM);
})

The other thing is variables caching. The function which is calculating header position traverse DOM every time it's invoked. Since DOM operations are quite expensive, it's better to avoid them if not necessary.

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

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

One more thing I've noticed – there are scroll perf issues on desktop view too, caused by extensive repaints of the background image. This is caused by a script changing background-position to achieve parallax effect. It's generally better idea to use CSS transforms, like translate3d(), which are hardware accelerated. This way browsers can schedule layer (image) transformations to GPU, omitting unnecessary repaints, making the page scroll smoothly.

Good luck with the fixes!