Bug: interaction hotspots trigger below fixed elements

  1. Describe the problem your experiencing and how your idea helps solve this
    A scrollable (clickable) list of items triggers the interaction even if a fixed element overlaps it. Additionally, this bug occurs even if that overlaping element has a “Tap → None”

  2. Add as much context as possible (screenshots, Figma files, mockups, etc.)
    Stumbled upon this issue when I had to position an iOS keyboard on top of an interactive list of elements.

Demo file and steps to reproduce:

  1. Start the prototype from https://www.figma.com/file/GpbLNhQGrYKCTFO8aZy8BK/Hotspot-bug
  2. Click the gray bottom rectangle with or without scrolling
  3. It wrongly triggers the hotspot from the “background” items

I came across the same issue. Looks like it is a bug.
Workaround: Select your scrolling area frame and enable Clip content. Worked for me.
But obviously, the mere fact that your content layer is already under your keyboard layer should auto-clip in my opinion…

I also came across the same issue while creating a navigation bar on top of a scrollable list of items!

Clipping content doesn’t seem to work for me? I managed to work around it by expanding all the navigation items to fill up the entire nav bar, so that there is no way to click on any “gaps” and accidentally reach the background items.

Definitely looks like a bug worth addressing soon!

1 Like

Seeing this issue too. Workaround not fixing it for me.

Okay, I think I figured this out, after hours of trying.

First of all, you have to make sure you have Overflow Scrolling and Clip Content turned OFF on your master frame.

Then, all of your scrollable content should be in a nested frame with Overflow Scrolling and Clip Content turned on.

Last, it seemed kind of hit or miss for me as I was making these changes, but I think closing out my project and reopening once all was said and done seemed to help. I think Figma needed a hard refresh to recognize these changes.

At least, it’s working for me now! fingers crossed

Hope that helps.

1 Like

Seeing this issue across all my prototypes too… Unfortunately the clipping trick above didn’t work. An update on this would be awesome.

Yes I’m having this issue as well. It’s a pretty basic function, having a fixed nav over a list of items that are clickable. I’ve created boxes in the nav to ensure there’s no clickable space, but still. This is quite annoying.

Still seeing this bug. Anything that is clickable that gets scrolled underneath the fixed content (the top nav) is STILL clickable through the top nav. Extremely annoying.