Stuttering animation in mobile devices?

Hi @vertigoooo

I replied to your ticket, but I’ll write here as well.

I checked your slider on my phone but I couldn’t really see the problem you are talking about. Now that I took another look, I’m wondering if the problem you see might be the parallax effect on mobile. You can disable it at the Slider settings -> Developer tab -> Background parallax: https://smartslider3.helpscoutdocs.com/article/1294-slider-settings-developer

Does that make any difference?

Also please note that as per forum rules, this forum is for the free version only, so with the pro questions please contact us directly. (As you did via email.)

@nextend_ramona

Hi Ramona,

Thanks for your reply, please note I am not using the pro version, but the free version
and because of that I do not have access to parallax effects therefore we can take that out.

Here is a screen capture of my problem:
https://drive.google.com/file/d/0B8POOD2IRiQ1cll3U1k5VmxDUDQ/view?usp=sharing

Please note that to achieve mobile responsiveness I have added more rows and cols that are hidden when in desktop mode and shown when in mobile / tablet mode

Hi @vertigoooo

I’m sorry for the confusion! I saw the parallax effect on our slider images (which is pro only) that is why I though you’re using that. Now I can see that it was made usign custom CSS codes.

Could you please try removing this custom code to see if that might interfere? It’s coming from this file: wp-content/themes/hestia-child/style-rtl.css?ver=

Are you using the same animations on both sliders?

@nextend_ramona

Hi Thanks for your reply,
Be sure I have suspected my css was causing this error and I made sure to remove every css added and still no effect.

I have detected after a lot of debugging, the problem is I added a background image for each of my slide, even without background-position:fixed, full page slider with background images was handled well on mobile devices causing performance to drop.

Is there any way to remove the background image in function of the screen width?

Also is there an option to serve different image size on mobile devices (or do I have to implement it with javascript my self?)

Update:

I have created a secondary slider for mobile devices, desplaying it with css only from media query (max-width: 840px) with display:block and hiding the desktop slider with display: none;

this seems like some sort of solution but still the images and scripts from the desktop slider are loaded which will affect loading time, I didn’t want to detect mobile via user agent in the server side because I’m using a cache plugin so that won’t be effective hence I must do it on the client side..

So is there any better solution to show different sliders on different viewports widths?

Hi @vertigoooo!

I’m sorry, but that option is only available in the pro version of our slider. In there we have a “Show on devices” option:
https://smartslider3.helpscoutdocs.com/article/59-slider-size
and if you turn on the “Server side mobile detect” at our Global settings:
https://smartslider3.helpscoutdocs.com/article/214-responsive-mode
then your slider won’t load.

But please note, that you said you are using a caching plugin. Caching plugins are working that way, that they are saving down the html code of your website and they are loading that everywhere, without running the PHP code before it and that is why they are making websites faster. “Server side” means PHP code, so we are only able to identify your device wether or not it is a phone, if our PHP code runs there. There is one more thing, that could work: if your caching plugin offers an option to have different caches for different devices. In this case our PHP codes would run on both mobile phones and desktop computers, the caching plugin could save them separately and then it would load the one connected to that device.

@nextendweb_gabor

Hi thanks for your reply!
Do you know of any free plugin that is capable of dynamically loading the cached version?

I haven’t really tried these caching plugins, but as I read here:
https://www.inmotionhosting.com/support/edu/wordpress/recommended-wordpress-plugins/cache-mobile-pages-wordpress-super-cache-wptouch-plugin
from “Enabling Mobile support with Super Cache”, this plugin should be able to do that:
https://www.ads-software.com/plugins/wp-super-cache/

I can also read at W3 Total Cache, that it has “mobile support”:
https://www.ads-software.com/plugins/w3-total-cache/
which seems to be this feature.

At Hyper Cache I see “Mobile aware: double cache for desktop and mobile site versions”, which also seems to be this:
https://www.ads-software.com/plugins/hyper-cache/

@nextendweb_gabor
Hi I could not find the global responsive settings? I turned on expert mode but the menu hasn’t changed, note I am using the free version

Okay i found it, I had to go inside the slider and choose settings from there ??