Skip to main content

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 😎, 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! 😉

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.


Reply


Terms & ConditionsCookie settings