2022.6.3 - Gauge card background becomes transparent after viewing entity history

[ShadowFistOkami]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

After the upgrade to 2022.6.3, the gauge card background turns transparent right after you click the card to view history & close history. Clicking on an empty section of the desktop or on a different entity* restores the correct background colour.

• clicking on a different entity is temperamental on mobile app only - glance card will restore the background, but entities card won't.

Confirmed reproducible on:

• Chrome desktop (both standalone gauge card as well as gauge card in a vertical stack)
• Edge desktop
• Mobile app

Describe the behavior you expected

Background colour should be retained for glance card when clicking on the card to view the entity history & closing it.

Steps to reproduce the issue

1. Create a gauge card on dashboard
2. Click on the card to view the history popup
3. Close the history popup, either by clicking X or by clicking outside the popup
4. Note that the entire background of the card is now transparent
5. Click on an empty section of the dashboard
6. Note that the entire background of the card is restored

What version of Home Assistant Core has the issue?

2022.6.3

What was the last working version of Home Assistant Core?

2022.5.3

In which browser are you experiencing the issue with?

Google Chrome Version 102.0.5005.63 (Official Build) (64-bit) Microsoft Edge Version 102.0.1245.33 (Official build) (64-bit) Home Assistant Mobile App (Android) 2022.3.0-full

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

type: gauge
entity: sensor.water_heater_temperature

Javascript errors shown in your browser console/inspector

no errors in console

Additional information

Before click:

After click:

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ShadowFistOkami]

Unstale. Still occurring on 2022.8.6

[karwosts]

I believe this is due to this in the card css:

https://github.com/home-assistant/frontend/blame/dev/src/panels/lovelace/cards/hui-gauge-card.ts#L271

      ha-card:focus {
        outline: none;
        background: var(--divider-color);
      }

--divider-color is set to rbga 255,255,255,0.12, so it's very transparent. I'm not sure why this needs to be there. None of the other cards have a similar setting on focus.

[ShadowFistOkami]

@karwosts while you might be onto something, that commit is from 3 years ago, while this issue started last June. The gauge card DOES turn transparent very briefly on click when showing more info (which I believe is caused by the focus), but returns to its original background colour after less than a second. I believe that was always the standard behaviour for this card.

It is only when closing the more-info popup that it goes transparent once again but gets stuck in that state, which leads me to believe that the card is maintaining focus.

To confirm this, I double checked the companion app and this is indeed what's happening. It's quite simple to replicate:

• Add enough cards on a dashboard so that you need to scroll between the first & last card
• Stick a gauge card at the very bottom
• Scroll all the way down & show more info for the gauge card, then close the popup. At this point the transparency issue rears its head.
• Scroll all the way up & show more info for the first card, then close the popup. You will automatically be scrolled back down to the gauge card, meaning it must be keeping focus.

Something changed in the 2022.6 release which causes this card to maintain focus even when it shouldn't. I'll keep digging & trying to find out what exactly changed, but I'm not exactly a pro where it comes to code. If anyone else with more experience could take a look, I'd really appreciate. UPDATE: I suspect this PR is what caused it. Merged in on May 16th, which lines up with the timeline of the issue & is the only focus-related change I can spot. Sorry to tag you @steverep, but could you shed some light on whether your change could have caused this issue?

[karwosts]

It seems perfectly reasonable to me that the element would be focused after closing the dialog.

I just suspect that it is not supposed to be transparent when it is focused. :)

[karwosts]

Confirmed that just deleting the ha-card:focus section works great, it fixes the issue for me. If nobody else comments, I'll submit a PR for it.

[steverep]

Yes, it should just be a styling change to fix this. The return focus is for accessibility.

[karwosts]

@iantrich , I believe you added this css in #4160.

      ha-card:focus {
        outline: none;
        background: var(--divider-color);
      }

Is this working as intended, is divider color supposed to be transparent? (I'm seeing the default value is RGBA 255, 255, 255, 0.12) Can we remove this css style? No other card seems to have this ha-card:focus attribute for background color.