lovelace-card-mod CSS doesn't seem to work when casting Lovelace page to my Google Hub

My Home Assistant version: 2021.6.0

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Casting a Lovelace tab

What I expected to happen: Additional CSS to be rendered

What happened instead: Nothing

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
        card_mod:
          style: |
            .name {
            font-size: 30px;
            }
            div {
            font-size: 20px;
            }
# End of code

Error messages from the browser console:

By putting an X in the boxes ([]) below, I indicate that I:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Jun 03 '21 19:06 flyize

+1 on this

CSS via card-mod working great when browser displays the view.

But - casting does not display the same CSS mods.

[Update] -1 on this. Not sure why - but my Google Next Hub (2nd Gen) is now correctly displaying card-mod CCS. Possibilities include updating HA to latest (core-2022.2.0), or a cache issue on the Google Hub. Anyway - all good now.

[Update 2] +1 on this This is wierd. Briefly - my Google Next Hub DID show text with CCS formating. Next day (later same day?) back to unformated text. I have

restarted my HA instance
flushed cache at cloudflare.com (as the https://URL for the view goes via cloudflare)

No idea what magic dust is needed to get the formatted text back again.

Feb 04 '22 02:02 UBWH

Do you still have problem using card-mod with casting to Google Nest Hub? I have problem with it as well. From that everything worked as expected to now, not working. All other custom components seems to work. Could it maybe be that not right module 3.1.2 is loaded by the casting. Will try to factory reset the hub and see if that helps. Have you tried that @UBWH ?

Mar 21 '22 13:03 greberg

Casting to Google Hub (for me) is flakey at best:

Have to re-cast about twice a day. For reasons I don't know, the Hub just stops casting.
The Hub randomly reboots while casting. Google bug????
The CSS fails to work 95% of the time. Very rarely - my CSS font changes appear on the Hub. Always a surprise when that happens. But never lasts long

BTW: The Hub and HA computer (usually running at 5% CPU load or less) are on the same LAN.

Mar 21 '22 13:03 robclark56

Yes the casting has been flakey. Especially when Google moved to Fuchia os. They have a strange implementation that for a lot of people mean that you need to re-cast every 10 minutes. So casting works ok with this and the CSS has been working flawless until for 2022.3 release. Casting still works but the CSS seems to not work. Not sure if it is a cache problem here or something else. Will try factory reset and maybe deploy casting locally on my network instead through Nabu Casa

Mar 22 '22 06:03 greberg

I am casting on local LAN (not via Nabu Casa). Yes - have https URL with LetsEncrypt SSL cert. Both the Hub & HA server on same LAN.

CSS works VERY rarely.

My casts last for hours (generally) but not days.

Mar 22 '22 06:03 UBWH

Factory reset didn't work. Will report back when running local instead

Mar 22 '22 06:03 greberg

In my case, this was actually completely self inflicted. At some point I added some copy of 'cast' to my custom_components folder. Once I removed that, everything started working again.

Mar 22 '22 15:03 flyize

So I have setup everything locally now so I can inspect the Google Hub Device. This shows something about if Uncaught (in promise) TypeError: t.refresh is not a function at HTMLElement.o.update (/hacsfiles/lovelace-card-mod/card-mod.js:6)

I'm not an expert within javascript so I need someone to have a look at this, if this actually is a problem. But what chrome://inspect shows it seems to be with the if statement and the t.refresh: if (o.update && !o.update.cm_patched) { const e = o.update; o.update = function(o) { e.bind(this)(o), t.refresh(), this.updateComplete.then((()=>{ t.refresh() } )) } , o.update.cm_patched = !0 }

Mar 22 '22 19:03 greberg

Have manage to get it to work by installing version 3.0.12 and now it works. As soon as I deploy later version it stops working and create tons of issues pointing to t.refresh.

Mar 23 '22 20:03 greberg

Have manage to get it to work by installing version 3.0.12 and now it works. As soon as I deploy later version it stops working and create tons of issues pointing to t.refresh.

Fantastic. Worked for me! Thank you so much!

Mar 23 '22 20:03 suneworld

Updated to 3.1.4 after the April Fools incident and I'm no longer getting the CSS via cast. Seemed like it worked 4 out of 5 times previously (and a re-cast would fix before). Now only getting non-styled view. Using Lets Encrtypt SSL via DuckDNS. Casting to a Lenovo 10" Smart Display.

Apr 04 '22 12:04 markus99

Just to reiterate what my problem was. Please make sure that you don't have a custom_components/cast folder under you HA config folder.

Apr 04 '22 13:04 flyize

Yes, ty @flyize - checked that folder and nothing relating to cast is in there

Apr 04 '22 15:04 markus99

Worth noting, I just downgraded to 3.0.12 and it's working correctly again. Appears something changed b/w 3.0.12 and 3.1.4 that Google Cast doesn't like.

Apr 04 '22 16:04 markus99

I have expiriensed the same issue. Often no elements with Card-Mod items. After downgrade to 3.0.12 everything is working smooth. I am casting with catt to Google Nest Hub 2.

Apr 16 '22 12:04 kleinerhobbit

Same issue here, running HA 2022.5.2 currently.

Using the built-in Google Cast service (cast.show_lovelace_view service).

This is across Chromecast-capable devices:

Sony Bravia XR-65X90J
Nvidia Shield Pro 2019
Google Nest Hub
Google Nest Hub Max

Side question for anyone following this thread: Is there a way to change the resolution the device renders the Dashboard? The Sony and Shield Pro appear to be 720p whereas the much smaller display Google Nest Hub/Hub Max appear to be 1080p. A lot of wasted real estate on the TV and Shield Pro that would be great to take advantage of.

May 07 '22 15:05 jdiegmueller

card-mod recently updated to 3.1.5, but the problem is still there. Version 3.1.1 works fine though...

Jun 03 '22 17:06 jtonk

So I have setup everything locally now so I can inspect the Google Hub Device. This shows something about if Uncaught (in promise) TypeError: t.refresh is not a function at HTMLElement.o.update (/hacsfiles/lovelace-card-mod/card-mod.js:6)

I'm not an expert within javascript so I need someone to have a look at this, if this actually is a problem. But what chrome://inspect shows it seems to be with the if statement and the t.refresh: if (o.update && !o.update.cm_patched) { const e = o.update; o.update = function(o) { e.bind(this)(o), t.refresh(), this.updateComplete.then((()=>{ t.refresh() } )) } , o.update.cm_patched = !0 }

Hi @greberg, I was wondering if you could share how you were able to debug the page on the google nest hub. I would like to try to solve this issue but I don't see the nest hub on the chrome inspect.

Oct 24 '22 03:10 Mas-Tool

@Mas-Tool Your nest hub should appear in chrome://inspect if you are in the same network. If no then I'm not really sure really why. For me the nest hub appear in the list when I run inspect

Oct 24 '22 14:10 greberg

Hello, I still have the incident with version 3.2.0