8 replies · opened Jun 20, 2023
Hi,
We have been developing our site using canvas 7.
We implemented lazy loading in the site, but we are experiencing jerks and layout shifting as we quickly scroll.
We saw that, the problem seems only with FireFox browser, in Google Chrome it works fine.
We have followed as per the documentation: https://docs.semicolonweb.com/docs/shortcodes/lazy-loading/
I have attached the video for your reference.
Request to assist on the same.
Best.
I would appreciate a reply here.
Hello,
Thanks for your Patience! We usually reply within 1 Business Day.
We have checked out your Website and based on the Lazy Loading codes, everything seems fine. We would recommend the following steps to troubleshoot this:
Remove all external JS plugins.
Use the following code:
[ch_pre]
[/ch_pre]
instead of:
[ch_pre]
[/ch_pre]
to see if this makes any difference as we think Lazy Loading the JS might be causing this as the Elements are rendered and JS Codes are executed after the JS is available on the Page which might be causing Firefox to jump. Using the above codes should avoid that.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
Thanks for the details and apologies for the delayed response.
We had tried the solution you suggested but it didn't helped.
I wonder if the problem is : The Elements are rendered and JS Codes are executed after the JS is available on the Page, how Google Chrome is able to manage it?
You can check the website for the changes you suggested.
Request to assist on the same.
Regards,
Sharad
Hello,
Thanks for your Patience!
We have checked out the Codes and based on the issue on Firefox, we are unable to pinpoint the exact issue as Chrome, Edge & Safari, all of them work fine. We have also checked out Our Demo Pages: https://canvastemplate.com/ and https://canvastemplate.com/lazy-loading.html but both of them work perfectly fine on Firefox and both of them have Lazy Loading enabled. This makes us suspect that the jerk issue might be due to Layout Shifting Elements on the Page which are a result of Customizations on the Page. We would recommend removing Elements on the Page one-by-one and determine what is causing the Jerks. Additionally, also consider fixing the Duplicate ID issues on your Page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.revatics.co.uk%2F .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
Thanks for the update, we have removed the error for duplicate id and we checked that the client section was causing the problem, so currently we have removed it from the home-page.
But we need that client Carousel, and that Carousel is referenced from the this link: https://canvastemplate.com/clients.html [Full Width Carousel]
For your reference - the Carousel is still present in other pages like - https://www.revatics.co.uk/web-development
Request to assist for the same.
Hello,
Thanks for your Patience!
We have repeatedly checked this and unfortunately this is an issue out of our control as Firefox is behaving in a different way and this error in not directly related to Canvas's Codes but will happen on every website with Lazy-Loading/Owl Carousel. We recommend not using Lazy-Loading and Owl Carousel together due to content shifting causing Layout Shifts in Firefox.
We will definitely try finding more relevant solutions and try optimizing this with better implementations in Future Updates.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hi,
Upon further analysis we found the culprit :)
It was data-auto-width, not sure how, but after removing it, there are almost no jerks
We have changed accordingly on our live website, you can have a look.
But due to this the images are now not maintaining its aspect ratio, which is another problem.
Request to assist on the same.
Regards,
Sharad
Hello,
Thanks for your Patience!
As we have already mentioned earlier, the issue is related to LazyLoading and Owl Carousel being combined together. Also, upon further examining your codes, we can see that while the data-auto-width has been removed from the Owl Carousel, the Width/Height Attributes still remain on the Image which is causing the Aspect Ratio to go awry. Removing the Width/Height Attributes should fix these issues. Since these issues are related to Customizations, and Customizations related Support are currently out of Scope of included Support: https://support.semicolonweb.com/support-policy/, we kindly request you to please keep your questions within the scope of our Support Policy. Thanks for your Kind Understanding and Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard