Off-canvas mobile scroll not smooth

hello,
The off-canvas on mobile scroll is not smooth at all. Please advise on how to fix this.
the URL is: https://jenninepunzone.com and please click on either the logo, cupcake or wigheads to see what I mean.
thank you

Hi Jennine,

Your website is not loading properly on our end and shows many console errors, which might be due to the migration. I would suggest you check and let us know once it is accessible.

Thanks

I didn’t migrate the website. It was a fresh build. I am showing no errors. please see attached screenshot

Hey Jennine,

I am not quite sure of what do you mean by the off-canvas is not scrolling smoothly on the mobile. I check your website on the actual mobile device and I was able to scroll the off-canvas content without any issues. Would you mind sharing more information on how we can replicate your issues? Providing screenshots or videos is a great help.

Thank you.

hello. here is a video. There are a couple of things going on.

  1. on android the titles on the homepage thumbnails don’t show on mobile at all
  2. the scroll on the off-canvas is not smooth. it gets stuck and its slow and hard to move back up. I have to keep sliding with my finger as opposed to just swiping up and it scrolling smoothly
    https://www.youtube.com/shorts/QGIuHIxsvlA

Hey @Jennine,

The smooth scroll that you’re experiencing is a body scroll feature of the browser itself. It looks like browsers don’t have a feature to smooth scroll on an element level but I’ll post this case in our issue tracker as a feature request so this will be queued to be researched by our development team. There’s no workaround to make the Off-Canvas smooth on mobile.

Regarding the thumbnail title, first, look at how it shows on the desktop. It’s revealed when you HOVER. That hover event is non-existent on any mobile and/or touch devices unless you maybe use a mouse which is a special case.

That said, the only solution for that is to rethink how you will show the title on mobile, maybe set up a hidden Headline below each div in each Cell and only then only display the Headline on mobile using the Hide During Breakpoints feature.

Hope that helps.

how is it being done properly here?

Hello @Jennine,

In your Off Canvas element, Off Canvas > Set Up, please disable the “Body Scroll” and see how it affects the scrolling. You may have to do this in all of your Off Canvas elements present on the page.

Hope this helps.

Hello,
Thanks for the suggestion but unfortunately I do not see any difference with the body scroll enabled or disabled. Is there anything else I can try?
Thanks again

Hey @Jennine,

Thank you for providing the link to your other site where smooth scrolling works. Because of that, I’ve discovered the exact conflict and I’ll post this in our issue tracker to be queued for investigation by our development team.

Regretfully, there is no solution or workaround.

Please stay tuned for updates.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.