Mouse enter/leave flickering

Sorry I don’t really know how to explain this. I have a menu, while hovering with the mouse you should have a more options on each category. I made a classic mouse enter = open overlay / mouse leaves = close overlay, but in the preview, it keeps flickering when approaching the button area, like one pixel tells mouse enter and the next pixel triggers the mouse leave event, next pixel triggers mouse enter, etc.

Please take a very quick look and tell me if it’s a bug or if I made a mistake, thank you.

flickering mouse enter / mouse leave project

1 Like

figma flickering issue

Here, I recorded it.

1 Like

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

1 Like

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

1 Like

Sorry to hear this is happening, @Ioan_G_TyraelThas!

Please reach out to the support team directly via this form for help: https://help.figma.com/hc/en-us/requests/new

Please use your Figma account email, include a link to the file, and share it with support-share@figma.com, so they can take a closer look.

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.

1 Like

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.”

3 Likes

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.

3 Likes

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.

1 Like

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! :joy::joy:

1 Like

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.

Screenshot 2023-08-31 at 3.16.30 PM

Hope that helps!

4 Likes

Nice workaround! Thanks for sharing!!

1 Like