Safari, iOS Companion App: glitches when "fill: fade" & using "decluttering-card" #839
Description
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.