Slider Jitters, Jumps, Cuts and Lags

Hi,

i’m using slider revolution and the theme’s slider on top of my main page. i’m running some problems.. for clarification:

slider revolution contains only 1 single slide and is only visible for desktop, hidden for mobile and tablet device. the content loaded by slider revolution is already optimized (file sizes aren’t big).

the theme’s slider is visible for mobile and tablet devices and disabled for desktop/tablet landscape view.

Please watch it out:
– Slider Revolution on desktop: https://ibb.co/6W7BbJT
– Theme’s slider (3x) on mobile: https://ibb.co/TPN5QXF
https://ibb.co/wNJkpWL
https://ibb.co/TTbj2HQ

this is how i set the rows with sliders on main page: https://ibb.co/t4b76Sw

Slider Revolution behavior on desktop:
Slider Revolution is loading this one single slide very slow. how can i speed it up?

Theme’s slider behavior on mobile
loading time of the theme’s slider is ok (could be better), but the main problem is: it produces terrible quirks! after refreshing/wehen loading the page the touch responsibility is really bad and after scrolling there are always jumps, cuts, jitters and lags noticeable. especially when changing the direction of scrolling (up-down-up-down-up-..). how can i get rid of them?
(side info: on shop pages this doesn’t happen right now)

here you can watch a video how it’s behaving on mobile: https://streamable.com/vst68n

hope find a solution 🙂

i provide access to our website in private section if you want to take a look.

best regards!

Hello,

Please make the full backup of your site as well as the Theme settings export and check the issue on the Storefront theme to detect if our theme causes the problem. Storefront is a free theme developed by Woocommerce.

Best Regards

It seems to be an issue with google chrome browser on android mobile devices. tested safari & firefox both on android and ios, they work smooth. What to do against this ‘jumps’?

Hello,

This behavior is caused by the Chrome browser floating URL bar which is by default is showing when scrolling to top and hiding when scrolling to the bottom. By default, spaces between sections in our demo content pages are set via vh value (https://prnt.sc/vby6ry) and when Chrome floating URL bar changes its position it also changes the height of the page which in its turn changing all vertical height vh values.

Unfortunately, this browser behavior is can’t be changed via WordPress theme, and the only solution we can suggest is to change all vh spacing values to px in WPBakery display options.

Best Regards

Hi,

we did the suggested changes from vh to fixed pixels, however the behavior did not change. We also observed, that this misbehavior does not occur on mobile firefox browser which has also a similar floating searchbar feature.
Any other suggestions?

Hello,

We have checked and see that you have removed not all vh It is important to remove all vh if you leave at least one vh it recalculates the height on the mobile screen.

Please check and remove all from these pages: https://prnt.sc/vj4myh and https://prnt.sc/vj4n40

Then remove on all the sliders accordingly:

https://prnt.sc/vj4njv,
https://prnt.sc/vj4ozu,
https://prnt.sc/vj4nqc,
https://prnt.sc/vj4p5l

Then clear the cache and check again.

Best Regards

Now we removed all vh and put px instead on main page (+slides). additionally we kicked out slider revolution on desktop.. -> this caused a perfromance boost both on mobile (plus of speed and smoothness of scroll, no more image shifts) and desktop. But we still face the issue that the mobile bottom navigation bar is ‘jumping’ when scrolling (always when changing direction). for clarification please watch the screen recording: https://streamable.com/kfiebd

How to fix this?

Best regards

Hi,

We have checked this issue with different devices and browsers and found that it first appeared after the latest Mobile Chrome browser updates (for example similar mobile chromium based browsers like Opera or Edge works fine). Also following jumps is more visible on pages that contain a lot of JS based stretch row scripts of WPBakery builder (for example pages without WPBakery rows like shop page is works normal). Unfortunately since this issue is caused by recent mobile Chrome browser updates we don’t have a quick solution for this, but will investigate it further and if this problem can be fixed from our side via WordPress theme it will be fixed in the next theme update.

Best Regards

[Author]

Posts