Stops working on mobile after a few slides – rev slider

[Charisa Richardson]

Hi,

I hope your day is going well! I’m using this feature with the revolution slider, but on mobile it causes issues. After you scroll on revolution slider through the first few images, they turn white. I can still click on the image and it shows it in lightbox but I need it to work with both. http://2017.rembrandtyard.com/weddings/

When I deactivate the plugin it issue goes away. After initially deactivated and reactivating, it started working  but then stopped again.  I’ve checked chrome and Safari.

Any thoughts?

Thanks!

Here is a screenshot

 

[RavanH]

Hi Charisa,

I can reproduce the issue on your site on mobile and on Chrome desktop with the developer tools open and mobile view activated. Even when first opening in normal desktop view, browsing the revslider and then half-way switching to small screen view, it appears to be happening. But I do not see why. There are no errors in console.

Apparently after a certain number, images are loaded loaded through ajax request but on small screen the request gets blocked.

Could you temporarily remove the custom “revapi” script that you added to the slider? It will obviously break the interaction between fancybox and revslider but I’d like to see if it restores mobile slide browsing…

One other thing I noticed is there seems to be some fancybox style rules in the theme stylesheet that conflict with the fancybox stylesheet. I wonder if there is other fancybox related javascript in the theme script files somewhere that could be interfering here.

To fix the fancybox rotating loading icon looking badly, you might want to add this to the Custom CSS theme option to make the loading icon look better:
#fancybox-loading div { background-position: top left; }

[Rolf]

UPDATE: it appears the issue occurs on normal desktop screen too. At least with a cleared browser cache and when browsing the slider just a little further than on mobile… Are you sure this is related to Fancybox?

[Charisa Richardson]

Hi,

Thanks so much for all the input! So yes we did also discover that the issue is happening on Safari desktop as well.

I deactivated the script on this gallery http://2017.rembrandtyard.com/weddings/ and now it’s working on mobile and on safari desktop. Let me know what you discover and if you’d like login.

** Thanks for the css tip! I added it.

[RavanH]

Hi Charisa, the issue still occurs on Chrome from my end. Strangely, it does work fine sometimes (all images are showing) but most times not. Each time I visit with the developer tool bar open and the option “disable cache” checked to avoid seeing a cached version of the site.

I’m not sure what this means but could you set the Lazyload type option to “none” in the Revslider settings? I think it’s done on slider level, not the general settings. And maybe completely disable Easy FancyBox to make sure there is no remaining conflict?

 

[Charisa Richardson]

Hi. Thanks so much! Disabling the lazyload seemed to do the trick. I appreciate all your help!!

[Rolf]

Hi again, you might want to try different lazyload settings. Completely disabling lazyload is a bit sad as you will cost a lot in respect to page load time and bandwidth consumption. Only if none of the available options work good, then the only one remaining is “none”…

Good luck and if you have the time, please let us know 🙂

[Author]

Posts