position of element also changes size

[Hypnos3]

The component has a very strange behavior when entering the top/left styles to set the position. Instead of the position, the size also changes debendend on the values of the top: xx%/left: xx% styles.

For all other elements of the picture element such as state-icon, state-label, image, ... you set the position with top/left and set the size with transform: scale(0.2,0.2)

This behavior also results in very strange values for top: xx%/left: xx% compared to the other elements.

Example here a state-label and the cover-icon-element will be positiones at a similar place on the picture:

  - type: custom:cover-icon-element
    entity: cover.k13_003_wohnzimmer_rollladen_links_03
    title: Rollladen Links
    opacity: 0.08
    tap_action:
      action: more-info
    style:
      top: '-8%'
      left: 3%
      color: black
      transform: scale(0.2,0.2)
  - type: state-label
    title: Rollladen Links
    tap_action:
      action: more-info
    entity: cover.k13_003_wohnzimmer_rollladen_links_03
    style:
      top: 22%
      left: 34%
      color: black

To get an approximately same position of the cover-icon-element you even have to move the top position to the negative.

On the same picture element I have another cover-icon-element on an other position. To have the same zize, it needs compleetly different scaling factor to have this shown with the same size as the element on the other position.

  - type: custom:cover-icon-element
    entity: cover.k13_001_wohnzimmer_rollladen_fenster_01
    title: Rollladen Fenster
    opacity: 0.08
    tap_action:
      action: more-info
    style:
      top: 56%
      left: 86%
      color: black
      transform: scale(0.8,0.8) rotate(-90deg)

[queimadus]

I can reproduce this as well, and I also have to account for this behavior when placing this element in the picture-element card. Not quite sure why it behaves like that 🤔