Safari, iOS Companion App: glitches when "fill: fade" & using "decluttering-card"

[ildar170975]

Found a rather serious bug.
It occurs when:
-- fill: fade;
-- the mini-graph-card is placed inside a custom:decluttering-card;
-- there are at least 2 cards on the view with different height.
-- using Safari (observed in MacOS 10.x & iOS 15.x) or iOS Companion App.

Here is a code for a decluttering template (put your own sensor):

decl_test_graph:
  card:
    type: custom:mini-graph-card
    entities:
      - entity: sensor.speedtest_isp_1_download
    hours_to_show: 24
    height: '[[VALUE_HEIGHT]]'
    show:
      fill: fade

and for the test view:

  - type: vertical-stack
    title: inside decluttering
    cards:
      - type: custom:decluttering-card
        template: decl_test_graph
        variables:
          - VALUE_HEIGHT: 200

      - type: custom:decluttering-card
        template: decl_test_graph
        variables:
          - VALUE_HEIGHT: 100

  - type: vertical-stack
    title: w/o decluttering
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.speedtest_isp_1_download
        hours_to_show: 24
        height: 200
        show:
          fill: fade
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.speedtest_isp_1_download
        hours_to_show: 24
        height: 100
        show:
          fill: fade

The view contains 2 stacks:
-- two mini-graph-card inside declutering-card - with different heights;
-- two mini-graph-card - with different heights.

How it looks in Chrome+Win:

And how it looks in Safari:

There is a glitch on the top-left card - the "fill" seems to occupy just a half of the area.

As a workaround - use "fill: true".
Or do not use Safari & iOS Companion App.

---

A possible reason is described below.

The graph contains of three objects:
-- the graph's line;
-- the graph's points;
-- the graph's fill.

If the card contains several entities - then it contains several sets of those objects (line, points, fill).
To differ objects belonging to different entities, the code uses a unique ID:

containing a unique string and some index (0 - 1st entity, 1 - 2nd entity, ...).
The unique string seems to be some kind of "this card unique ID".

But when placed inside a decluttering-card, these IDs are same:

The declutter-child- part is always same.
Means - if several cards are present on the view, a wrong fill mask may be selected.

A possible fix should be generating a unique ID.

[jlsjonas]

Issue is caused by decluttering-card overriding the random id to a hardcoded declutter-child, breaking the HTML compliance of the page (ids must be unique)
I recommend raising an issue there pointing to the line/including this comment; it can set it's own id (would actually be beneficial in several cases); however there should still be a unique part of the id (f.e. declutter-child-<instance#>)

[ildar170975]

Absolutely agree - this is a decluttering-card issue.
Unfortunately, the repo seems to be abandoned.
And the author does not respond...
OK, we'll keep using fill: true as a workaround.

Created an issue - custom-cards/decluttering-card#55

[ildar170975]

Issued a fix in decluttering-card: custom-cards/decluttering-card#90.
(can be "fixed" locally - open the corresponding "decluttering-card.js" in a text editor & remove this line; then save the js-file, delete gz-file, purge a browser's cache)

Earlier only experienced the issue in Safari (observed in MacOS 10.x & iOS 15.x) or iOS Companion App.
Starting from 2025.2.5 + Chrome 133.0.6943.127 - see this issue in Chrome too.
Test code:
decluttering templates:

test_decl_graph_fill_true:
  card:
    <<: &ref_settings
      type: custom:mini-graph-card
      entities:
        - entity: sensor.xiaomi_cg_1_co2
      hours_to_show: 6
      points_per_hour: 60
    name: "decluttering, fill: true"
    show:
      fill: true

test_decl_graph_fill_fade:
  card:
    <<: *ref_settings
    name: "decluttering, fill: fade"
    show:
      fill: fade

test view:

  - type: custom:decluttering-card
    template: test_decl_graph_fill_true

  - type: custom:decluttering-card
    template: test_decl_graph_fill_fade

  - <<: &ref_settings
      type: custom:mini-graph-card
      entities:
        - entity: sensor.xiaomi_cg_1_co2
      hours_to_show: 6
      points_per_hour: 60
    name: "fill: true"
    show:
      fill: true

  - <<: *ref_settings
    name: "fill: fade"
    show:
      fill: fade

Result in Chrome:
After "refresh" from a sandwich menu:

Note that the card with fill: fade inside a decluttering-card may not have a fill.

After F5 - again good:

See no issue in iOS Companion App (iOS 15.7.x).
Note that the glitch occurs even with only card (i.e. not with cards with different height as it was reported in the 1st post).