Mushroom Card blocking full screen video on Android.

[Daniel-dev22]

Requirements

• I have updated Mushroom to the latest available version
• I did a search to see if there is a similar issue or if a pull request is open.

Current Behavior

Out of the blue I was suddenly on both an s21 and s22 unable to full screen videos. Between the time it was working and when it stopped I made 0 code changes to the frontend. I'm on the latest version of card mod and mushroom. If I remove card mod from hacs it works. If I add it back and remove mushroom and leave cardmod it also works. One of the 2 is messing this up.

For more detail I started this issue in the android repo as I thought it was a companion app issue because it works if I use Google chrome on both devices just not the companion app.

home-assistant/android#3268

Also important to note it works in Google chrome just not android companion app. It stopped working on a Samsung s21 a few weeks before my s22. I provided a bunch of videos recreating the issue and WebView logs of the companion app and Google chrome in the android issue link above.

Expected Behavior

No response

Steps To Reproduce

No response

Context

No response

Environment

- Browser: Chrome/2023.1.1-full
- HA Version: 2023.2b3
- Mushroom: 2.5.2

Anything else?

No response

[piitaya]

Do you have the issue if you use another template card than Mushroom (e.g : Markdown card) ?
Mushroom do not officially support card_mod and will never. I cannot guarantee that there are no side effects.

[Daniel-dev22]

Do you have the issue if you use another template card than Mushroom (e.g : Markdown card) ? Mushroom do not officially support card_mod and will never. I cannot guarantee that there are no side effects.

I don't use another template card. I will move this to frontend to ask what the culprit is? My dashboard is all mushroom card, some Frigate card and card mod for styling.

[piitaya]

You will not have response because you're using 3 custom cards (frigate, card_mod and mushroom)

card_mod modify the dom to add custom style.

you can try these 2 configurations to find the issue :

1. Use card_mod + markdown card instead of mushroom card
2. Use title card without card

Do not uninstall card_mod and mushroom for your tests, just modify your yaml to use/not use it.

[Daniel-dev22]

You will not have response because you're using 3 custom cards (frigate, card_mod and mushroom)

card_mod modify the dom to add custom style.

you can try these 2 configurations to find the issue :

1. Use card_mod + markdown card instead of mushroom card
2. Use title card without card

Do not uninstall card_mod and mushroom for your tests, just modify your yaml to use/not use it.

I'm using more than just title card for mushroom. I'm using chips, template card, entities. The frigate card doesn't have an issue or webrtc camera card standalone. It's either mushroom or card mod with the issue. Probably card mod I have been told by a few people. As the card mod dev doesn't really do updates if I could find the answer in the code or configuration of card mod I would be able to fix it. I would prefer not to stop using card mod as it's the only way to do ccs styling.

[piitaya]

I converted the issue to a discussion as it's not a Mushroom issue.

I do not suggest to stop using card mod. I suggest you to try different configurations to isolate the issue. i don't use card mod and frigate so I can not help you more.

[Daniel-dev22]

That's a good idea I will play with stripping out card mod and testing to see if that helps.

[Daniel-dev22]

Is it possible to modify/override theme variables at the lovelace-card level without card mod? I might be able to just move a bunch of my reused card mod code to a theme. I am just not sure for the specific cards that require different styling whether I can modify a theme to use specific variables at the card level?

[Daniel-dev22]

@piitaya

Card mod is blocking this as I found that appears when full screen is working and card mod is not installed and when card mod is installed it doesn't appear when full screen is broken.

The question is what do I do with this information lol. Is there something I can do to add this back or stop cardmod from messing with this element.

This only appears in the companion app and doesn't appear in Google chrome so I assume this is related to WebView?

:root:-webkit-full-screen-ancestor {
    overflow: hidden !important;
}

[Daniel-dev22]

We can close this