Mouse enter/leave flickering

figma flickering issue

Here, I recorded it.

Same issue for prototyping complex navigation. Everything worked 3 month ago.

Seeing the same thing. Worth noting that the flickering does not occur when you remove the mouse leave > close overlay interaction.

Also having the same issue.

I’m simulating the effect of a transparent header going sticky and changing to a solid bg color on scroll.

The way I did it was I made a copy of the home page with the sticky solid header. Then I used:

mouse leave on the hero section of home 1 → navigate to home 2

and

mouse enter on the hero section of home 2 → navigate to home 1

It worked as intended a week ago. Now it’s broken. Same flickering issue, once triggered it never stops. It loops infinitely between the two pages.

My only clue is that it started happening at the same time as the “state management” update.

Same issue here

Having the exact same issue, haven’t seen any solutions yet

I am also having the same issue.
The prototype flickers while prototyping a mouse enter = open overlay / mouse leaves = close overlay. It doesn’t flicker when you remove the mouse leave = close overlay interaction.

Here is the staff answer

Hi there,

I checked your overlay. “Mouse Leave” triggers whenever the mouse is outside a section, ‌not if the mouse enters and then leaves an area. Therefore, your overlay is both closing and opening at the same time, this is what is causing the flickering. To make this work properly, I would recommend using interactive components instead of the Overlay feature. An example of what I’m talking about is in the community file below.

https://www.figma.com/community/file/1101844796311678876

Still not sure why I should use interactive components instead of using mouse enter/mouse leave but well… I’ll try to figure out one of those days

This explanation is misleading. There seems to be a bug associated with the “Mouse leave” functionality. Even in the example they provided, the solution involves a workaround utilizing “Mouse enter” alongside transparent boxes surrounding the dropdown menu to accomplish the intended purpose of “Mouse leave.”

In the example above, they give themselves away. Instead of using JUST ONE “mouse leave” behaviour (whish is obviously bugged) they have to wrap the whole menu to empty boxes with “mouse enter” condition. This kinda solves the problem in some ugly way but at the same time clearly DEMONSTRATES that the problem is still there.

I will only add that everything worked fine until May 24th.

The “Mouse leave” functionality is still bugged @dvaliao can you please look into it? I’m happy to provide you with an example file.

Having the same issue!

I’m experiencing the same issue, can anyone look into the detail and solve it for us? Thanks!

Same thing here, I tried using variables to control visibility with boolean values and it ended up blinking anyway.

It’s so frustrating to learn this is happening to so many people and for a relatively long time. The “Mouse Leaves” should be renamed to “Mouse is Off the Element” until it starts behaving as it should: you only trigger a mouse leave interaction IF the mouse has entered the element before.

Well well well, it looks like I’m not the only one. How is it possible that the bug existed for so long already?

There’s definitely a bug here…This issue has been driving me crazy, but glad I’m not the only one experiencing this. I’ve attempted several workarounds from variants, to components, removing auto layout, frames etc. still experiencing flickering on “Mouse Enter” interaction. I initially thought it was because I had a “Hover” variant interaction AND a “Mouse enter” general interaction on the same element, so I removed the variant interaction, but unfortunately this did not provide a fix. If the issue persists and longer I might have to start my prototype presentations with an epileptic seizure warnings! 😂😂

I think I figured out a workaround. The overlay flickers because of the mouse leave interaction is set to the overlay itself, not the triggering frame. So the triggering frame keeps opening the overlay and the overlay keeps closing it if your mouse is not on top of the overlay.

In order to eliminate the flickering I set a 200ms delay to the mouse leave interaction on my overlay. So now I have enough time to move my mouse cursor over to the overlay and it doesn’t trigger the overlay to instantly close again.

Hope that helps!

Nice workaround! Thanks for sharing!!

Thank you so much! Was fighting with this flickering issue the whole day!

I also have the same issue. It’s annoying that still there’s no solution for it.

A solution that worked for me (not a workaround):

Basically I was running into a similar problem with the flicker. In my case, I was trying to use a “mouse enter” transition to navigate to a new frame to do a header nav colour change when my cursor entered a diff section. The flicker was because my scroll position was resetting during the transition and getting triggered over and over again in a continous loop as my cursor was entering a different trigger section after the scroll reset.

Here’s Figma’s documentation on this:

The old state management did not track your top level layer / frame name, therefore you could mouse-enter / mouse-leave and trigger a frame change to any frame with any naming convention and it would not glitch out (transition from a “Page-A” frame to a “Page-B” frame).

But now with the new state management rules, the flicker we have all been facing could likely be due to a layer name issue. In order to ensure that the flicker doesn’t happen by ensuring that the scroll position does not reset, you have to use the same name for your top level frame (e.g. both frames are called “Home”), or at the very least, they must share the same prefix (e.g. “Home/B” and “Home/B”).

Doing this instantly fixed the flicker for me and allowed me to do most of the complex prototyping actions under the old state management rules, hopefully it works for everyone else as well.

Thank you!!

Adding to this thought because I found the same “solution”. However, it doesn’t seem like it’s just about the mouse being on top of the overlay itself. It seems to be that the event is triggered with every (even slight) move of the mouse within a minuscule amount of time. The reason is that if I hover over my main navigation button (that triggers the overlay) and keep my mouse moving, I get the flicker, but if I ever so slightly move the mouse and get it to stop within [whatever that loop Figma has checking for mouse movement], I can get the overlay to stay open (or stay closed for that matter). That makes the moment of mouse transition into the overlay critical because that could be the moment it closes it, or the moment it opens its. Either way, it’s the overlay-triggering button causing the issue and that slight delay helps buffer that loop that’s checking for mouse movement. I can even add a delay as tiny as 1ms and it “fixes” it.

I should add to my last post just moments ago — if you add a dissolve to the overlay (as opposed to “instant”) it throws the whole “solution” out the window. The timing issue becomes unsurmountable. Really, really annoying.