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