animated background disappears after few minutes

[jaganath-b]

Hi,

Thanks for your great work. Your recent fix resolved the issue i had with animated background as it didn't work after upgrading to .108.3. Current issue is that animated background goes off (plain background) after few minutes. I had to reload the url to get the animated background again. Also, background is applied only to the first tab. Other tabs just has a blank screen. Any possibility to look into these issues?

[Villhellm]

I'm currently trying to replicate the blank background, would it be possible for you to open the browser console when that happens to check for errors? I'll leave my window open for the rest of the day to see if I run into the same problem.
The issue with only the first tab actually makes sense. Apparently the new theme logic applies the background to each tab individually, but I missed it because my test instance only has one tab. I'll start working on that one now. In the mean time you can set the theme of those tabs to a theme with the primary-background-color set to transparent.

[Villhellm]

Actually an easier workaround is to go into raw config mode (or edit your ui-lovelace.yaml if you're in yaml mode) and add background: transparent directly to your view.
Ex:

views:
  - title: test
    background: transparent
    path: test
    badges: []
    cards: []

[Villhellm]

Okay, the current update should fix the different tab issue.
Please let me know if you have anymore information on the blank background issue. I'll continue to monitor on my end to see if I can replicate it.

[jaganath-b]

Thanks @Villhellm ,

Adding the background as transparent worked. I could now see the animated background across other tabs. Regarding the blank screen, animated background stays as long as the screen is active. For instance, if i close the laptop & open it immediately, HA refreshes the page, but the background goes blank. I could see the same behaviour in the mobile app (android) as well.

Here's the Console log from Chrome. I'm not sure if its related. I had to stop the session by closing the laptop and opened it again. Found the following error in console and the background was blank.

[Violation] 'requestAnimationFrame' handler took 72ms
[Violation] Forced reflow while executing JavaScript took 75ms
[Violation] Forced reflow while executing JavaScript took 31ms

[Villhellm]

I'm sorry, this module is only meant to function as long as the screen is active. Refreshing the page when you reactivate the app/tab is the correct action to take in order to keep it functioning. Please let me know if the issue starts happening when the screen is still active.

[jaganath-b]

Ok sure. Just to let you know that it's working perfectly fine in the .107.7 version. I.e when the HA screen refreshes automatically, the background animation is refreshed as well. Issue started after upgrading to .108.3 wherein i had to either reload the url in the browser or close & reopen the mobile app again to see the image.

[Villhellm]

I had to change the location that the html is rendered because they removed the DOM element I was using in 0.108. I can try tying it to a mutation observer, but you'll have to test it for me because I still can't replicate the issue (I don't currently have a laptop)

[jaganath-b]

I just checked it. Still the issue occurs.

[Villhellm]

I hadn't changed anything yet. I put the changes to test in the refresh-test branch. Please download that version of the js file to test

[jaganath-b]

Awesome. It's working now!!!! Thank you very much for your help...

[Villhellm]

Good 👍 no problem