Stuttering scroll behaviour possibly due to display:none / display:flex interaction? [FIXED]

[chadisfred]

Having an issue with click-through scrolling…

Just a note: this site was built specifically as a kiosk-style web app for iPad air 2. So please keep that in mind if you are viewing on PC and it looks a bit wonky.

I’ve been battling with a scrolling issue – previously, I was able to remedy the situation after finding that elements that animate had more than one interaction applied to them that was calling different animations… once found I was able to set to “none” for the interaction and it was back to silky smooth scrolling.

Now, however, I can’t seem to remedy the issue.

Some changes that happened when the new scroll issue started:

• I’ve added a form element to the quiz area (I utilize tabs to move through the questions and then to a form element). My thought is that maybe the error message / completion messages being hidden from view is causing the issue… but I am not sure how to confirm this.

Any help or direction that you all could provide would be appreciated.

Chadisfred.

---

Here is my public share link: LINK
Here is a published version to capture scripts LINK
(how to access public share link)

[chadisfred]

After the tons of responses I received to my original post I am happy to say I have fixed the issue.

Here are my findings and how i corrected the issue:

For my site, because it operates like a kiosk on an iPad, I have created these ‘title slides’ – Basically overlays that are absolutely positioned to span over a content block that fade away after that block of content scrolls into view. I do this with a main splash screen that spans the entire viewport and then for each content block section.

Originally to hide these elements and to keep text selectable, I would create a scroll interaction for the 100% sized sections that would then affect the title slide by waiting, fading out, and adding a display:none property.

For some reason I began noticing slow down and had an inkling that it had to do with this display:none property being applied to an element. The reason I think this is happening is because the element is there in the calculation, or estimation of the the scroll-to… but then all of a sudden this block of content is no longer there, so the system freaks out and stutters on scroll… I personally don’t have the technical knowledge to verify this assumption, so take it with a large bucket of salt.

My fix was to change all my interactions that applied display:none to dropping the opacity to 0%. This still did not fix ability to click content that sat below these content blocks, so in cases where I needed the ability to click or select items within the content blocks, i applied a -100% transform to slide the transparent content block off screen.

Once all those changes were made, scrolling is silky smooth and I’ve had no other hiccups.

Hopefully this proves helpful to those who might run into a similar issue.

I am going to attempt to do a test case to repeat the issue and report it as a bug.

[vincent (Webflow Expert)]

After the tons of responses I received to my original post

;-p yeah sometimes is overwhelming, right?

Sorry that you didn’t get any answer. Good that you solved your issue, and that’s pretty cool to come back and update your post for others in the same situation

[chadisfred]

It’s no problem… No hard feelings, I’ve been lurking the forum for a while so i know what’s up. Happy to add where i can.