Skip to main content
Question

Sticky element's blurred background not working properly

  • September 18, 2024
  • 6 replies
  • 215 views
Jakubowski

Hello! There seems to be quite annoying bug with background blur effect.

I’m using auto layout for entire page composition (each landing page section). First element in “content” container (let’s call it A) is a sub-navigation bar that has sticky position and background blur effect. When I run a prototype, the effect works as expected only above first container after the sticky bar (let’s call it B), but scrolling further, above another one (let’s call it C), sticky bar’s background becomes solid / opaque.

Also — which I’ve found out by coincidence — if you make those consecutive containers scrollable horizontally (C, or D, etc) and put some element inside them that actually allows for horizontal scrolling (even for 1px) than background blur on the sticky bar (A) works correctly… But that doesn’t always work…

HELP! Thanks! 😉

6 replies

Matthew_Chandler_Prina

I noticed this too.

I have multiple sticky headers (subheadings) going down a page. I thought it would look cool to give them a background blur. It looks really good for the first header (as page contents scroll underneath it) but as soon as I hit the next sticky header the first sticky header slides behind it. After close examination it seems like the header doesn’t become completely opaque at this point but almost. I think what is happening is that the blur from the first sticky header is being added to the blur of the second sticky header and compounding. It becomes more and more compounded with each subsequent header. Logically, it makes sense that it would work this way however for this use case of subsequent sticky headers, it would never be the desired effect. It would be nice if there was a way to get the same background blur on all of the sticky headers as you scroll down the page.

Jacob Price
  • Jacob Price
  • New Member
  • 2 replies
  • February 6, 2025

Having the same issue!

Sean_Michael1

Same issue. Ironically, I can fix this faster in code, than I can wait for Figma to fix a bug in prototyping. 

andraspii
  • andraspii
  • New Participant
  • 6 replies
  • February 24, 2025

Yeah, no background blur for Sticky elements in prototype. :( Figma fix this bug please!

Michael Villas

Experiencing the same issue! I have a main page header that’s fixed to the top with a background blur that works correctly, but the subsequent subheaders that are sticky to the top on scroll are fully opaque when the background blur is set to anything greater than 0. 

y_toku
Figmate
  • y_toku
  • Community Support
  • 2278 replies
  • February 27, 2025

Hi all, 

 

Thanks for flagging and our apology for the delayed response. It seems I could replicate this issue as below:

https://www.loom.com/share/a3ecb0ba854c42cc96f298c04071a5f6?sid=ea52ae75-eccc-4693-854a-74e62a5641a0

 

Since I’m checking with our internal team, I will get back to you when I have anything I can share with you. 

 

Thanks for your patience!

Toku

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings