Other lovelace cards flicker and sometimes don’t load their borders when initializing

[ronaldheft]

I’ve noticed when loading a lovelace view with the this card on it, all of my lovelace cards briefly flicker, and sometimes don’t come back with their borders and dropshadow.

I’ve been debugging this, and narrowed it down to this plugin and particularly the initialization code:

https://github.com/kalkih/mini-media-player/blob/1cadce3307d49a920e3cc81f2f87c42e8fbd7ba6/src/main.js#L139

It seems the resize observer is doing something that is modifying other lovelace cards. If I remove my mini-media-player card or comment out the initialization code, the flicker doesn’t happen. If I add multiple mini-media-player cards to a single lovelace view, I get multiple flickers (one for each mini-media-player card), telling me that there is some type of problem with the initialization code.

I haven’t had a chance to fully debug yet, but I’m expecting there is a selector somewhere that is selecting all lovelace cards and not just mini-media-player card.

[kalkih]

Hmm, I've never experienced this myself. I played around with the ResizeObserver now and tried to reproduce this but wasn't able to. The resizeObserver is scoped to the custom element, so that shouldn't cause any problems by itself. Could be related to requestAnimationFrame perhaps? https://github.com/kalkih/mini-media-player/blob/1cadce3307d49a920e3cc81f2f87c42e8fbd7ba6/src/main.js#L141 This is basically the only time we touch anything outside of the components scope.

What browser and OS are you running? And if you have time, would you mind sending me a gif/video of the strange behaviour? Thanks!

[ronaldheft]

I’ve seen this on Safari and MobileSafari on MacOS and iOS (running latest versions).

I can definitely record a video. I might not be able to tonight, but I will do some hopefully by tomorrow at the latest.

It’s possible there is an additional interaction somewhere with another card. I will try removing my other custom cards and see if I can find a culprit that may be causing an issue with the resize.

[ronaldheft]

Here is example of my lovelace dashboard loading without the mini-media-player: https://youtu.be/-nKSdqhTs7w

Notice how all the lovelace cards load immediately and don't flicker.

Now here is an example of my lovelace dashboard loading with the mini-media-player: https://youtu.be/cxAIGBtE414

Notice how all the cards flicker and then they don't load with their borders or backgrounds.

I'm going to keep on debugging this and see if I can figure out any more useful information.

[ronaldheft]

Played with removing other custom cards and essentially made a single view with mini-media-player and the default lovelace entities card, and I still get the flicker. :-(

[ronaldheft]

Updated to 0.107 of Home Assistant and still unfortunately seeing the same flicker.

[kalkih]

I'm able to replicate the flicker in safari, but the other card backgrounds seem to always come back for me.

I'm seeing the same behaviour when using the new media-control card as well (it's using resize observer) as well. What about you, do you see the flicker with the new media-control card as well?

[ronaldheft]

Interesting. Yeah, I'm also seeing the flicker with the media-control card. So it sounds like this is a lovelace issue.

[Beertje135]

I also experience a flickering of my cards. But this is always my Mini-media-player card. It flickers/reloads so fast, controls are impossible. This is very annoying. I don't know if it is a problem with the card (it's the only one that has this problem) or a general problem as proposed above?

[kalkih]

A lot has happened in the home assistant frontend since this was opened. Anyone still experiencing this particular issue?

[danbush]

I'm still seeing flickering when using this card, haven't yet debugged enough to know if it's this exact issue, but seems likely.