Glass effect not working if inside Auto Layout parent with "First on top" Canvas stacking order. (And if that glass effect element is wrapper by another frame)
- Create a frame element (like a navbar) that has Glass effect and call it glassNavbar
- Place it in a frame representing a page.
- Add some more elements in the page so we have a page that the navbar is sitting on top of.
- Add auto layout to all of the elements (including the navbar) and put the “Canvas stacking” in “Last on top” mode so that the first element (the glassNavbar) to appear on top of the other ones (basically a higher z-index)
- In Prototype Tab select the Scroll behaviour position of the glassNavbar to “Sticky (stop at top edge)” so that it works like a navbar. Now the glassNavbar is sticky but the problem is that it sticks at the very top edge of the screen, I need some margin.
- So far everything works properly and the glass effect is working. But the breaking change is the following: Add another frame around the glassNavbar so that I can control the empty space (basically the margin) around the glassNavbar without having a glass effect on that empty space. Call it “navbarContainer”. And now the glass effect doesn’t render anymore it looks just like a normal “background blur” effect.
You could overcome this by just adding a padding top to the whole page but I can’t do this in my project. I need to control the amount of spacing from within the navbarContainer component.
Another important point is the auto-layout over the whole page and the “Canvas stacking” in “Last on top” mode. If I remove that then the glass effect is working again. But again, I need that auto-layout.
Basically what I need to do is show my client 2 versions of the navbar: one detached from the top (floating, with that spacing at the top), and one stuck at the very top (without the top margin/padding). And I need to do this change in all the pages while only changing one component/property (the glassNavbar inside that navbarContainer). I can’t modify the topPadding of each page individually while doing the switch between the pages and I can’t not have the autolayout that wrapps all the elements in the page.


