I’m creating a website design with a header in glassmorphism style. However, when I scroll the page in prototype, this container with background blur becomes buggy, with a white blurred line behind it. I ran some tests and conclude this only happens in autolayout (my whole website page is an autolayout). This really ruins the aesthetics of my webpage and I need to present this prototype soon. I don’t know how to fix it.
Hi, could you maybe share your file with us, so we can take a closer look? Would be great. Otherwise, try looking for a line in the layers panel or try to select by draging in the area where the line is visible and then check in the layers panel if there is an object that’s not supposed to be there.
Hi, there’s no real line in the frame, since it is an autolayout. My guess is that it is blurring the prototype background, but I don’t know… Here’s the file link: https://www.figma.com/file/FI22bU5FVoQVHg0IePO0uL/Untitled?node-id=0%3A1
Yeah, sorry, my mistake. I found a solution, but sadly you won’t have an auto-layout only project anymore.
Just put your auto-layout in a frame. That’s it.
Edit: Changing the background color (top right corner) of your file to black (a darker color) will also fix it. Then you won’t need a frame at all. Hope this helps.
hey, changing the file background color really helps! thank you so much!
Glad I could help. Good luck with your project and have a nice day!
1 Like