Havn
Havn

Hey, @manton! You so often have to help us with technical problems - so I wanted to help you back, with a solution to a problem with the Micro.blog website!

(With a guest apperance of @pratik’s great photo.)

|
Embed
Progress spinner
manton
manton

@Havn Oh interesting! Thanks for sharing that. I hadn't noticed because I'm in Safari and Firefox more often. Copying @vincent too since he first worked on the blur.

|
Embed
Progress spinner
vincent
vincent

@manton @Havn oh interesting. I’d rather remove the blur or change the actual background opacity for these instead of working around it with JS — they should fix that in the browser engine 😋 I’ll play around with it.

|
Embed
Progress spinner
Havn
Havn

@vincent Haha, yeah - they should. 😛 Personally I’m a sucker for blur, so I would try to keep it somehow. But maybe, when you know that the solution is to «turn off the parent’s blur» you can figure out a clever way to do it without js. ☺️

|
Embed
Progress spinner
In reply to
Havn
Havn

@vincent @manton I just remembered something! I think you can solve it, without javascript, with the pseudo-elements :focus or :focus-within!

I think it would work to do something like

header { background: rgba (237, 242, 247, .7); backdrop-filter: blur(20px) }

header:focus-within { background: rgb (237, 242, 247); backdrop-filter: none; }

(There I just did the same rgb levels, but without opacity - but I'd pick something a bit more gray or whatever matches the best.)

|
Embed
Progress spinner
vincent
vincent

@Havn @manton huh! I’ll explore that. That sounds way better to me. I was going to look at :has() or something similar in CSS anyway.

I’m back on MB work next week, so will play around with that.

Thanks so much for giving us an easy time with the examples haha 😛

|
Embed
Progress spinner
Havn
Havn

@vincent Cool! 🙌🏻 Have a nice weekend in the meantime. 😊

|
Embed
Progress spinner