Prototype Components Scroll Bug

[Bogdan_Dobrescu]

Hello,

I’ve been experiencing a weird bug when it comes to the prototype of some latest projects i’ve been working on. These involve alot of “On hover” effects within the components.

The bug happens once you scroll the screen and the “On hover” effects triggers on a component and all of the hotspots become unnaccesable, seemingly scrolling past where the component is actually on the screen.

Before scroll:

After scroll:

Recording:

[AhmedA]

Hi I have the same exact bug, it’s broken all our prototypes. Extremely frustrating.

It sometimes pushes them all up so far that you can’t interact with anything on the page.

[AhmedA]

hey @Bogdan_Dobrescu do you have a “Scroll to” interaction in your prototype? that’s what seems to be breaking mine

[Bogdan_Dobrescu]

@AhmedA The “Scroll to” interaction breaks everything instantly, yes. But sometimes even simple scrolls on the page breaks it.

[AhmedA]

Ah I see, have you gotten any replies from Figma yet?

[Bogdan_Dobrescu]

@AhmedA Nope, but I also had some issues with a larger sized library that didn’t update properly and now works fine so maybe they are working on this scroll issue as well.

[Sam_Berrington]

Also having this issue and doesn’t seem to be resolved yet.

Only workaround I’ve found is reloading the prototype directly in Figma or reloading the browser window the prototype is running in.

[AhmedA]

@Sam_Berrington @Bogdan_Dobrescu Figma got back to me an essentially said “We know this exists and have been trying to fix it for a while”. I did find a solution which is wrapping the frame that’s meant to scroll in a frame with no auto layout applied. For some reason that seemed to fix the issue for me.

[Sam_Berrington]

After much frustration, I’ve also found a method that seems to cure this bug for me. Below are the steps I took and I hope they’re of some help to others.

1. Move or copy your prototype into a brand-new page that only has your prototype in it. (Double-check all your links are still there as sometimes these can come away whilst moving / copying and pasting)
2. Make sure the primary frame of each of your prototype pages you are linking between is the same size as the device preview dimensions you are running the prototype in. Eg, If you’ve selected iPhone 8 for your device size whilst previewing your prototype, make sure the frames in Figma are 375px by 667px. This may mean your content is clipped but if you need to edit anything, either extend it back out, make the amends and then shrink it down again or unselect ‘Clip content’ from inside the ‘Design’ tab, top right of your Figma window. (The same rules apply for any overlays you may be linking between).

This seems to of solved the issue for me and I hope it does for others too.

[Joseph_F_Admin_UX_UI_Opco_EP]

I have the same problem !!! Once I create a “Scroll to” interaction in my pages, the links are offset randomly… Thank you for sharing your solution if you found one.
Joseph