thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.13k stars 168 forks source link

Video fails to full screen because of cardmod #251

Closed Daniel-dev22 closed 1 year ago

Daniel-dev22 commented 1 year ago

For videos and more context reproducing the issue see the Android Issue I started a few days ago.

If I remove either card mod or mushroom card and leave the other it works and I have a video of it working as expected.

I have been told by more than one experienced developer that it's probably card mod. I have been on the latest version of card mod since it was released in 2022. I made 0 dashboard configuration updates before this issue appeared and did not update mushroom card before the issue appeared. It happened out of the blue on the s21 and a few weeks later the s22 again with 0 updates that could be attributed either that I made or automatically by webview.

My Home Assistant version: 2023.2.b3 but this started earlier.

My lovelace configuration method (GUI or yaml): YAML

What I am doing: The video is supposed to become full screen on a single tap.

What I expected to happen:

What happened instead: It is blocked from becoming full screen.

Minimal steps to reproduce: Android 13 Not sure if the phone type matters. Card mod Mushroom card Try to make a video full screen though frigate card or webrtc camera card standalone

# The least amount of code possible to reproduce my error

# End of code

Error messages from the browser console:

No errors. console_logs_chrome.log console_logs_companion_app.log


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

Daniel-dev22 commented 1 year ago

Upon further investigation I found the difference between working and non working on the android companion app.

When card mod is not installed, as soon as a full screen request is made this appears in elements. When cardmod is installed this does not appear and the video fails to become full screen. This doesn't appear in chrome regardless of whether card mod is installed because it works without an issue with cardmod. The issue is in the android companion app that something in cardmod is blocking this.

:root:-webkit-full-screen-ancestor {
    overflow: hidden !important;
}
ildar170975 commented 1 year ago

Minimal steps to reproduce: Android 13 Not sure if the phone type matters. Card mod Mushroom card

This is absolutely NOT clear. Which card? Which card-mod styles? No code is provided...

Daniel-dev22 commented 1 year ago

Minimal steps to reproduce: Android 13 Not sure if the phone type matters. Card mod Mushroom card

This is absolutely NOT clear. Which card? Which card-mod styles? No code is provided...

It's card mod causing an issue across the entire frontend. Including iframe panels being unable to full screen. Frigate card and webrtc card. This was working before and no dashboard code was changed when this suddenly stopped working. It's not that simple to provide dashboard code as my entire dashboard is cardmod. You would need the entire dashboard lol. There is no card mod styling on the Frigate card or webrtc card and if course not the iframe panel. I have a lot of videos recreating the issue and showing it working without cardmod in the android issue linked above.

It's not an issue on specific dashboard pages it's entire frontend. Iframe panels are not even apart of the dashboard and they are affected.

My dashboard is 4,596 lines long. Would you like it to recreate this?

ildar170975 commented 1 year ago

Nobody asked for your entire dashboard’s code. If you are interested in solving the issue - then you should try to localize the problem, to define a MINIMAL configuration which may be reproduced by people.