On tablets and mobile not working

[RenzoBeux]

Hi! It works perfect for desktop runing chrome but on tablet and my cellphone it seems it is doing anything.

[joshtbernstein]

Strangely this works on my Lenovo Yoga Tab 3 running an old version of Android, but doesn't work on my Amazon Fire HD 10. Both running Fully Kiosk.

[RenzoBeux]

yep, fire tablet here too, i dont know, i finally got it working, but is extremely laggy. I don`t know :(

[myenong]

Fire HD 10+Fully Kiosk not work

[Nicxe]

Galaxy tab a, fully kiosk not working anymore :-(

[skank01]

Is this still working? cause here on laptop it doesnt work..

[Nicxe]

Is this still working? cause here on laptop it doesnt work..

Not for me, but you can do the same with browser mod instead.

https://github.com/thomasloven/hass-browser_mod

[skank01]

I have browser mod too How can i blur it cause i dont see any info for that

[Nicxe]

@skank01 Use card mod Themes and add it yo you theme. This works for me,

  card-mod-theme: tablet
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(10px);
        background: rgba(0,0,0,0.0);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        border-radius: 1em;
      }

[skank01]

Hi, i just found it too thx

Mod Popup Blur Cards Behind

card-mod-theme: Google Dark Theme card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); background: rgba(0,0,0,0.25); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { background: none !important; box-shadow: none; border-radius: 0px; } ha-header-bar: $: | .mdc-top-app-bar { background: none !important; }

[skank01]

Yay its working thx

Op ma 26 okt. 2020 om 19:07 schreef Niklas V [email protected]:

@skank01 https://github.com/skank01 Use card mod Themes https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes and add it yo you theme. This works for me,

card-mod-theme: tablet card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: blur(10px); background: rgba(0,0,0,0.0); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { border-radius: 1em; }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gabe565/popup-backdrop-filter/issues/2#issuecomment-716729177, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMXFMVTMLXV4NKRKXCRGBCTSMW3FBANCNFSM4MYZHZOQ .

[mkanet]

@Nicxe Your card mod code works perfectly. Thank you! This is was the solution I used.

@skank01 Thank you. I had to take out some lines at the bottom for the blur effect to work. Maybe, its because I also use card mod code to make the header compact?

Blur effect completely broken using this code::

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
        background: rgba(0, 0, 0, 0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }
    ha-header-bar:      
    $: |
      .mdc-top-app-bar {
        background: none !important;
      }

Works:

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
        background: rgba(0, 0, 0, 0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }

Works perfectly without changing anything:

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        backdrop-filter: blur(10px);
        background: rgba(0,0,0,0.0);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        border-radius: 1em;
      }

[mkanet]

@skank01 @Nicxe , do you know if it's possible to use Card-Mod to also blur the background when opening up the card editor? I just asked this question in the Card-Mod forum; however, I'm not sure if anyone there has the backdrop filter to test against. I tried looking for the CSS elements responsible for this myself; however, I'm not very good at CSS mods yet.

[noxhirsch]

I've integrated backdrop-filter into the upcoming Home Assistant version (the beta just has released a few minutes ago). There you can add this snippet to your theme and get blur on popup dialogs everywhere (even in the settings etc.):

  dialog-backdrop-filter: blur(5px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

[mkanet]

@noxhirsch thank you so much. I'm currently stuck on Home Assistant version 0.116.4 due to a bug introduced in 0.117.x that breaks some people's REST sensors: https://github.com/home-assistant/core/issues/42608

Is there any way at all for me to use Card-mod or any other possible workaround until I can upgrade Home Assistant? I'm very motivated to get this working. Thanks again for your help.

[mkanet]

dialog-backdrop-filter: blur(5px) iron-overlay-backdrop-opacity: 1 iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

Thank you very much for this. It worked like a charm. I finally upgraded to the latest version of Home Assistant; which allowed me to take advantage of this.

[Sjorsa]

I've added

  dialog-backdrop-filter: blur(5px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

to my light and dark theme, but it doesn't work for me. I've restarted HA, reloaded browser etc. but I don't get the blurred backgrounds yet, could I have missed a simple step?

[noxhirsch]

@Sjorsa is your Home Assistant up to date or are you running a (very) old version? Or do you use Firefox? Then you may have to enable backdrop-filter: https://dev.to/rethinkprogramming/how-to-enable-backdrop-filter-in-firefox-2n8e

[Sjorsa]

@noxhirsch I am on core-2021.2.3 and just tried the firefox trick and restarted firefox, but it does not work. This is how I added it to my google light theme

[noxhirsch]

@Sjorsa That seems correct to me. Can you try if it works in Chrome or Edge Chromium?

[Sjorsa]

Oh it does work on Chrome, could there be some conflict with another plugin?

[noxhirsch]

@Sjorsa It's possible, but I don't think so. I have many stuff installed like card_mod and browser_mod and for me it's working fine in Firefox with layout.css.backdrop-filter.enabled and gfx.webrender.all = true.

[Sjorsa]

@noxhirsch Too bad then :( I love how it looks on chrome but I'm not switching back for just that feature haha, it's not THAT important :P

[deacrush]

I've integrated backdrop-filter into the upcoming Home Assistant version (the beta just has released a few minutes ago). There you can add this snippet to your theme and get blur on popup dialogs everywhere (even in the settings etc.):

  dialog-backdrop-filter: blur(5px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

Is it possible to get this to work with the iOS native Homeassistant App? I can get this to work on my android phone and pc but have no idea how to do it on iOS.

[noxhirsch]

@deacrush It's possible that the iOS app / Safari needs a -webkit--Prefix in my CSS addition for the HA frontend. I can add that soon™

[noxhirsch]

@deacrush: The PR that should fix it for Safari just got merged - so it should be available with the next release