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)
4 Answers
Answers 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"> Answers 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:
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!!!
Answers 3
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:
- The first one, Function Call from polyfill.js, which delegates the function execution to requestAnimationFrame (which is good)
- 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!
Answers 4
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); }; }; 
0 comments:
Post a Comment