card_mod CSS values not consistently rendering

[gdst4rp]

My dashboard uses code like the following, but the output rendered image will randomly vary from using the CSS elements (bold, font size, and borders), or completely ignoring them. If I view the dashboard from my browser, everything works just fine. Checking the native image itself, I see that the render is also not consistent which rules out the Kindle device. I have tried different rendering_delay values as well

I'm guessing it's something to do with how the page is rendered.

card_mod:
style: |
ha-card {
border: 2px solid black;
font-weight: bold;
}
.forecast {
font-size: 20px;
}

[gdst4rp]

For what it's worth, even using this yaml instead doesn't product consistent results (without using card_mod specifically):

style: |
ha-card {
border: 2px solid #000000;
font-weight: bold;
width: 600px;
font-size: 20px;
}

Here are two examples of different renders. Nothing has changed between them, I just waited a bit and refreshed my homeassistant:5000 image pull from my web browser. The kindle reflects this image exactly. The image with the bold lines/text is what it should look like based on my style. Without the bolds, it's harder to read the text on the Kindle.

[gdst4rp]

Any chance someone can take a look and let me know if I'm doing something wrong?

[sibbl]

I can recommend setting RENDERING_DELAY to some value like 2500 or 5000 (2.5 / 5 seconds). It's the time the browser let's the website apply changes like CSS or JS to the website before taking the screenshot. It can help letting Home Assistant settle the rendering process.

[gdst4rp]

I did try that unfortunately with varying levels of delay. The screenshots above came after using a setting of 20000, which I believe should be 20 seconds. I started much smaller, then kept moving up.

Sometimes, only part of the screenshot is wrong (e.g. the forecast section will be bold, but the other ones won't be. It's a real head scratcher for me.

[ja-m]

I have the same issue as gdst4rp.
I use card_mod to modify the cards for the screenshot. Sometimes the card_mod changes are not included in the render screenshot.

[gsmckenzie]

Same here. I have tried delays up to 60 seconds. Works really inconsitently. I am wondering if Puppeteer is having issues with card-mod. Frustrating things that it works some of the time. I even tried access the Puppeteer instance and changing the user agent, but that didn't improve results.

[gsmckenzie]

I suspect it is a caching issue inside docker. In general the first run works and then it is inconsisent.

[sibbl]

Just a quick question before I will debug this further: did you all install lovelace-card-mod via extra_module_url in the configuration.yaml or differently? There seem to be multiple ways, according to their docs.

[ja-m]

I use the performance improvement via extra_module_url.

frontend:
  extra_module_url:
    - /homeassistant/www/community/lovelace-card-mod/card-mod.js

[gsmckenzie]

I use the performance improvement via extra_module_url.

Same I think off the top of my head but can confirm later.

frontend:
extra_module_url:
- /local/card-mod.js
themes: !include themes.yaml

[ja-m]

It seems there are problems in card_mod:
thomasloven/lovelace-card-mod#359
thomasloven/lovelace-card-mod#354

[gsmckenzie]

I have tried very simple cards, with a single weather element and a delay of 50 seconds and I still get inconsistency.

The page will render in Chromium Canary on my macbook in under a second. I think get a correct render of the page 1 in 20 times (but not properly tested), but I can do if it is helpful?

[cln-io]

Did any of you figure this out? 👀

[avhm]

this fixed this issue for me: If you've installed card-mod via HACS, try adding the module directly to the frontend in your configuration.yml:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

[gsmckenzie]

@avhm That looks like it works for me. Thanks for chasing this down.

[ja-m]

@avhm I changed the path to card-mod.js like you suggested. Now it works for me, too.