App-header-backdrop-filter not for whole Ui

[dhoeben]

iOS device model, version and app version

Model Name: iPhone 15 Pro Software Version: iOS 17.5 App version: 2024.4

Home Assistant Core Version

2024.5.3

Describe the bug When using css variable 'app-header-backdrop-filter' in theme, it applies only to the menu and not the top part of the iPhone screen. See screenshot.

To Reproduce Add the theme.yaml: app-header-backdrop-filter: blur(20px) Expected behavior

Screenshots

Additional context

[bgoncal]

Indeed, I was discussing with the guys from frontend about this, it's not actually a bug but a nice improvement that I would also like to have it implemented. To do that we need to extend the webview behind the iOS status bar and then use the safe area in CSS considerations for the header. Currently I am working on high priority bugs but I'll keep you posted in case this gets implemented

[dhoeben]

Sounds good! Wish I could help, but unfortunately I am not good at all with Swift. Love your work btw!

[dhoeben]

I don't know if it's possible btw, but in dark mode there seems little to no issue but in light mode there is.

My app-header-background is rgba(0,0,0,0.8) and rgba(255,255,255,0.8), for the blur to work. It seems the default app background color is black, as the white seems more light grey than white and with dark mode not much different.

Is there a (quick) fix to have to app follow system dark mode and in light mode a white background?

[bgoncal]

I think it's better to make a complete implementation than to change the webview background to white on light and black on dark, because while it works for you, it may not look good for someone else, so.. in my opinion we shouldn't change this

[dhoeben]

It wouldn't make that much of a difference for anyone really, only for the people who are using opacity in their header background.

If there's anything I can do, let me know.