Z-index broken when using "ha-card-backdrop-filter" var in a theme

[HuisAutomatisering]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Hi there! Since i've updated to 2024.5 all my dropdown menu's drop below picture elements in the dashboard.
I alwasys follow all updates and never seen this before.

Describe the behavior you expected

Dropdown list should fall over all elements on top.

Steps to reproduce the issue

1. Klik the menu
2. Watch the list fall
3. Cannot click items because they are below the layer.
   ...

What version of Home Assistant Core has the issue?

2024.5.1

What was the last working version of Home Assistant Core?

2024.4.4

In which browser are you experiencing the issue with?

All browsers, tabelets, HA apps, android, mac, ios

Which operating system are you using to run this browser?

OSx Sanoma 14.x

State of relevant entities

Please come back to me if you need this.

Problem-relevant frontend configuration

This is my dasboard card. (sorry long card due no remotecontrol card excist in HA).

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: entity
        entity: sensor.time
        state_color: false
      - type: entity
        entity: sensor.date
        state_color: false
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - input_select.select_device
      - type: entities
        entities:
          - entity: input_select.tv_kanaal
  - type: conditional
    conditions:
      - entity: input_select.select_device
        state: Show remote
    card:
      type: markdown
      content: >
        <ha-alert alert-type="success">Er is geen afstandsbediening
        geselecteerd</ha-alert>

        Selecteer een apparaat om de afstandsbediening weer te geven.
  - type: conditional
    conditions:
      - entity: input_select.select_device
        state: TV
    card:
      type: picture-elements
      image: /local/640x360transparant.png
      elements:
        - type: state-icon
          icon: mdi:power
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: PowerToggle
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 5%
            left: 5%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:information-variant
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Info
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 4%
            left: 25%
            transform: scale(1.50)
        - type: state-icon
          icon: mdi:arrow-up
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionUp
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 4%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:television-classic
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: TV
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 4%
            left: 65%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:menu
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Menu
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 5%
            left: 83%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:volume-plus
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeUp
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 29%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-left
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionLeft
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 30%
            left: 25%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:check
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: OK
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 29%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-right
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionRight
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 30%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:chevron-up-box-outline
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: ChannelUp
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 30%
            left: 83%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:volume-minus
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: VolumeDown
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 55%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:volume-mute
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Mute
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 55%
            left: 25%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-down
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: DirectionDown
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 55%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:reply
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Back
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 55%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:chevron-down-box-outline
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: ChannelDown
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 55%
            left: 83%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:skip-previous
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: ChapterPrev
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 79%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:stop
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Stop
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 79%
            left: 19%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:pause
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Pause
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 79%
            left: 32%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:play
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: Play
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 79%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:skip-next
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: ChapterNext
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 79%
            left: 57%
            transform: scale(1.75)
        - type: service-button
          title: All off
          style:
            top: 80%
            left: 73%
            transform: scale(1.5)
          service: script.turn_on
          service_data:
            entity_id: script.1590762159881
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.select_device
        state: Blu-ray
    card:
      type: picture-elements
      image: /local/640x360transparant.png
      elements:
        - type: state-icon
          icon: mdi:power
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: PowerToggle
          entity: media_player.tascam_bd_mp4k
          style:
            top: 5%
            left: 5%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:information-variant
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Info
          entity: media_player.tascam_bd_mp4k
          style:
            top: 4%
            left: 25%
            transform: scale(1.50)
        - type: state-icon
          icon: mdi:arrow-up
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: DirectionUp
          entity: media_player.tascam_bd_mp4k
          style:
            top: 4%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:menu
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Menu
          entity: media_player.tascam_bd_mp4k
          style:
            top: 4%
            left: 65%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:eject
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Eject
          entity: media_player.tascam_bd_mp4k
          style:
            top: 5%
            left: 83%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:arrow-left
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: DirectionLeft
          entity: media_player.tascam_bd_mp4k
          style:
            top: 30%
            left: 25%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:check
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Select
          entity: media_player.tascam_bd_mp4k
          style:
            top: 29%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-right
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: DirectionRight
          entity: media_player.tascam_bd_mp4k
          style:
            top: 30%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:home
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Home
          entity: media_player.tascam_bd_mp4k
          style:
            top: 55%
            left: 25%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:arrow-down
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: DirectionDown
          entity: media_player.tascam_bd_mp4k
          style:
            top: 55%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:reply
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Back
          entity: media_player.tascam_bd_mp4k
          style:
            top: 55%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:skip-previous
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: SkipBack
          entity: media_player.tascam_bd_mp4k
          style:
            top: 79%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:stop
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Stop
          entity: media_player.tascam_bd_mp4k
          style:
            top: 79%
            left: 19%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:pause
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Pause
          entity: media_player.tascam_bd_mp4k
          style:
            top: 79%
            left: 32%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:play
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: Play
          entity: media_player.tascam_bd_mp4k
          style:
            top: 79%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:skip-next
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            target:
              entity_id: remote.harmony_hub
            data:
              num_repeats: 1
              delay_secs: 0.4
              device: Tascam DVD/Blu-ray Player
              command: SkipForward
          entity: media_player.tascam_bd_mp4k
          style:
            top: 79%
            left: 57%
            transform: scale(1.75)
        - type: service-button
          title: All off
          style:
            top: 80%
            left: 73%
            transform: scale(1.5)
          service: script.turn_on
          service_data:
            entity_id: script.1590762159881
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.select_device
        state: Pre-amp
    card:
      type: picture-elements
      image: /local/640x360transparant.png
      elements:
        - type: state-icon
          icon: mdi:power-on
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?PWON
          entity: media_player.denon_avr
          style:
            top: 5%
            left: 5%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:power-off
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?PWSTANDBY
          entity: media_player.denon_avr
          style:
            top: 5%
            left: 25%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:arrow-up
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNCUP
          entity: media_player.denon_avr
          style:
            top: 4%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:menu
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNMEN ON
          entity: media_player.denon_avr
          style:
            top: 5%
            left: 65%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:disc
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?Z2QUICK1 MEMORY
          entity: media_player.denon_avr
          style:
            top: 4%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:volume-plus
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MVUP
          entity: media_player.denon_avr
          style:
            top: 29%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-left
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNCLT
          entity: media_player.denon_avr
          style:
            top: 30%
            left: 25%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:check
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNENT
          entity: media_player.denon_avr
          style:
            top: 29%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-right
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNCRT
          entity: media_player.denon_avr
          style:
            top: 30%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:television
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?Z2QUICK2 MEMORY
          entity: media_player.denon_avr
          style:
            top: 30%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:volume-minus
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MVDOWN
          entity: media_player.denon_avr
          style:
            top: 55%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:volume-mute
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MUON
          entity: media_player.denon_avr
          style:
            top: 55%
            left: 25%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-down
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNCDN
          entity: media_player.denon_avr
          style:
            top: 55%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:reply
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?MNRTN
          entity: media_player.denon_avr
          style:
            top: 55%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:gamepad-variant-outline
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?Z2QUICK3 MEMORY
          entity: media_player.denon_avr
          style:
            top: 55%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:skip-previous
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?NS9E
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:stop
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?NS9C
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 22%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:pause
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?NS9B
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 37%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:play
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?NS9A
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 51%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:skip-next
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?NS9D
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 66%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:television
          state_color: false
          tap_action:
            action: call-service
            service: denonavr.get_command
            target:
              entity_id: media_player.denon_avr
            data:
              command: /goform/formiPhoneAppDirect.xml?Z2QUICK4 MEMORY
          entity: media_player.denon_avr
          style:
            top: 79%
            left: 83%
            transform: scale(1.5)
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.select_device
        state: AppleTV
    card:
      type: picture-elements
      image: /local/640x360transparant.png
      elements:
        - type: state-icon
          icon: mdi:power-on
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: wakeup
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 5%
            left: 5%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:power-off
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: suspend
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 5%
            left: 25%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:arrow-up
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: up
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 4%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:menu
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: menu
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 5%
            left: 65%
            transform: scale(1.25)
        - type: state-icon
          icon: mdi:netflix
          state_color: false
          tap_action:
            action: call-service
            service: media_player.select_source
            target:
              entity_id: media_player.appletv_woonkamer
            data:
              source: Netflix
          entity: media_player.appletv_woonkamer
          style:
            top: 4%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:volume-plus
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: volume_up
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 29%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-left
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: left
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 30%
            left: 25%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:check
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: select
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 29%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:arrow-right
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: right
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 30%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:alpha-h-box
          state_color: false
          tap_action:
            action: call-service
            service: media_player.select_source
            target:
              entity_id: media_player.appletv_woonkamer
            data:
              source: HBO Max
          entity: media_player.appletv_woonkamer
          style:
            top: 30%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:volume-minus
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: volume_down
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 55%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:home
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: home
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 55%
            left: 25%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:arrow-down
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: down
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 55%
            left: 45%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:reply
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: top_menu
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 55%
            left: 65%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:alpha-p-box
          state_color: false
          tap_action:
            action: call-service
            service: media_player.select_source
            target:
              entity_id: media_player.appletv_woonkamer
            data:
              source: Prime Video
          entity: media_player.appletv_woonkamer
          style:
            top: 55%
            left: 83%
            transform: scale(1.5)
        - type: state-icon
          icon: mdi:skip-previous
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: previous
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 79%
            left: 6%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:pause
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: pause
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 79%
            left: 25%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:play
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: play
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 79%
            left: 45%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:skip-next
          state_color: false
          tap_action:
            action: call-service
            service: remote.send_command
            data:
              command: next
            target:
              entity_id: remote.appletv_woonkamer
          entity: media_player.appletv_woonkamer
          style:
            top: 79%
            left: 66%
            transform: scale(1.75)
        - type: state-icon
          icon: mdi:alpha-s-box
          state_color: false
          tap_action:
            action: call-service
            service: media_player.select_source
            target:
              entity_id: media_player.appletv_woonkamer
            data:
              source: SkyShowtime
          entity: media_player.appletv_woonkamer
          style:
            top: 79%
            left: 83%
            transform: scale(1.5)
  - type: conditional
    conditions:
      - entity: input_select.select_device
        state: Channels
    card:
      type: picture-elements
      image: /local/640x180blauw.png
      elements:
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO 1
          image: /local/npo1.png
          style:
            top: 20%
            left: 10%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO 2
          image: /local/npo2.png
          style:
            top: 20%
            left: 30%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO 3
          image: /local/npo3.png
          style:
            top: 20%
            left: 50%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO Nieuws
          image: /local/nponieuws.png
          style:
            top: 20%
            left: 70%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: SLAM!
          image: /local/radioslam.png
          style:
            top: 20%
            left: 88%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Reggae
          image: /local/radioreggae.png
          style:
            top: 50%
            left: 11%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Sky Radio
          style:
            top: 50%
            left: 70%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Sublime
          image: /local/radiosublime.png
          style:
            top: 50%
            left: 88%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO Radio 2
          image: /local/radio2.png
          style:
            top: 50%
            left: 30%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Radio Veronica
          image: /local/radioveronica.png
          style:
            top: 50%
            left: 50%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Radio Decibel
          image: /local/radiodecibel.png
          style:
            top: 78%
            left: 11%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Radio 10
          image: /local/radio10.png
          style:
            top: 78%
            left: 30%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: NPO 3FM
          image: /local/radio3fm.png
          style:
            top: 78%
            left: 50%
            width: 20%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Arrow Classic Rock
          image: /local/radioarrow.png
          style:
            top: 78%
            left: 70%
            width: 15%
        - type: image
          entity: remote.harmony_hub
          tap_action:
            action: call-service
            service: input_select.select_option
            target:
              entity_id: input_select.tv_kanaal
            data:
              option: Studio Brussel
          image: /local/radiostubru.png
          style:
            top: 78%
            left: 89%
            width: 20%
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: input_select.select_device
            state: TV
        card:
          type: media-control
          entity: media_player.appletv_woonkamer
      - type: conditional
        conditions:
          - condition: state
            entity: input_select.select_device
            state: Pre-amp
        card:
          type: media-control
          entity: media_player.denon_dn_500av
      - type: conditional
        conditions:
          - condition: state
            entity: input_select.select_device
            state: Blu-ray
        card:
          type: media-control
          entity: media_player.tascam_bd_mp4k
      - type: conditional
        conditions:
          - condition: state
            entity: input_select.select_device
            state: AppleTV
        card:
          type: media-control
          entity: media_player.panasonic_tv_beneden
      - type: conditional
        conditions:
          - condition: state
            entity: input_select.select_device
            state: Channels
        card:
          type: media-control
          entity: media_player.50ex780
  - type: horizontal-stack
    cards:
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1590766002819
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1590766002819
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.tv_film
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.tv_film
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1577452631421
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1577452631421
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1590762413861
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1590762413861
      - type: button
        tap_action:
          action: call-service
          confirmation:
            text: Zeker weten dat de computer aan moet?
          service: script.turn_on
          service_data:
            entity_id: script.1590766411097
        hold_action:
          action: none
        entity: script.1590766411097
        icon_height: 20px
        show_icon: true
        show_name: true
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1590762351786
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1590762351786
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1595443655295
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1595443655295
  - type: horizontal-stack
    cards:
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1577455606915
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1577455606915
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.1590762664797
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.1590762664797
      - type: button
        icon_height: 20
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.atv_music
        hold_action:
          action: none
        show_icon: true
        show_name: true
        entity: script.atv_music
      - type: button
        show_icon: true
        icon: mdi:video-input-hdmi
        name: HDMI1
        tap_action:
          action: call-service
          service: remote.send_command
          target:
            entity_id: remote.harmony_hub
          data:
            command:
              - InputHdmi1
            device: Tv woonkamer
            delay_secs: 0.4
        hold_action:
          action: none
        show_state: true
        show_name: true
      - type: button
        icon: mdi:video-input-hdmi
        name: HDMI2
        tap_action:
          action: call-service
          service: remote.send_command
          target:
            entity_id: remote.harmony_hub
          data:
            command:
              - InputHdmi2
            device: Tv woonkamer
            delay_secs: 0.4
        hold_action:
          action: none
        show_state: true
        show_name: true
        show_icon: true
      - type: button
        icon: mdi:video-input-hdmi
        name: HDMI3
        tap_action:
          action: call-service
          service: remote.send_command
          target:
            entity_id: remote.harmony_hub
          data:
            command:
              - InputHdmi3
            device: Tv woonkamer
            delay_secs: 0.4
        hold_action:
          action: none
        show_state: true
        show_name: true
      - type: button
        tap_action:
          action: call-service
          service: script.1590762159881
          target: {}
        entity: script.1590762159881
        hold_action:
          action: more-info
        show_state: false
        show_name: true
        show_icon: true
  - type: horizontal-stack
    cards:
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        icon: mdi:music
        name: '-56dB'
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_set
          service_data:
            entity_id: media_player.denon_avr
            volume_level: 0.24
        hold_action:
          action: none
        theme: rounded
        icon_height: 25px
      - type: entity-button
        entity: media_player.denon_avr
        icon: mdi:music
        icon_height: 25
        name: '-50dB'
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_set
          service_data:
            entity_id: media_player.denon_avr
            volume_level: 0.3
        hold_action:
          action: none
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        icon: mdi:music
        name: '-40dB'
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_set
          service_data:
            entity_id: media_player.denon_avr
            volume_level: 0.4
        hold_action:
          action: none
        theme: rounded
        icon_height: 25px
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        icon: mdi:music
        name: '-30dB'
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_set
          service_data:
            entity_id: media_player.denon_avr
            volume_level: 0.5
        hold_action:
          action: none
        theme: rounded
        icon_height: 25px
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        name: Mute
        icon_height: 25px
        icon: mdi:volume-mute
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_mute
          service_data:
            is_volume_muted: false
          target:
            entity_id: media_player.denon_avr
        hold_action:
          action: none
        theme: rounded
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        name: Vol
        icon_height: 25px
        icon: mdi:volume-minus
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_down
          service_data:
            entity_id: media_player.denon_avr
        hold_action:
          action: none
        theme: rounded
      - type: entity-button
        show_icon: true
        entity: media_player.denon_avr
        name: Vol
        icon_height: 25px
        icon: mdi:volume-plus
        show_name: true
        tap_action:
          action: call-service
          service: media_player.volume_up
          service_data:
            entity_id: media_player.denon_avr
        hold_action:
          action: none
        theme: rounded
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:dolby
          icon_height: 25
          name: Cinema
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: MOVIE
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:surround-sound-5-1
          icon_height: 25
          name: Auro3D
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: DTS SURROUND
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:music
          icon_height: 25
          name: Music
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: MUSIC
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:gamepad-variant
          icon_height: 25
          name: Game
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: GAME
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:saxophone
          icon_height: 25
          name: Club
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: JAZZ CLUB
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:guitar-electric
          icon_height: 25
          name: Arena
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: ROCK ARENA
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: input_select.select_device
            state: Pre-amp
        card:
          type: entity-button
          entity: media_player.denon_avr
          icon: mdi:surround-sound-2-0
          icon_height: 25
          name: Stereo
          show_name: true
          tap_action:
            action: call-service
            service: media_player.select_sound_mode
            service_data:
              entity_id: media_player.denon_avr
              sound_mode: STEREO
          hold_action:
            action: none

Javascript errors shown in your browser console/inspector

No response

Additional information

Issue is with all dropdowns. You can only test this whit a picture elements card below a dropdown.

[ildar170975]

2000 lines of code

[HuisAutomatisering]

I did my best. There is no other official build-in "remote" solution that does the same. Don't want to go HACS route.
Anyway it's about the issue dropdowns going behind the picture elements since 2024.5, not about the card design.

[ildar170975]

Thing is that the view should have been simplified for testing & investigating purpose.
2000 lines contains lots of your entities (which could be crucial for conditional cards), it is not easy just copy/paste the code into own setup for testing.

Also, I guess this is a look from some mobile client (which was not mentioned).
Have you tested on a desktop PC?

[HuisAutomatisering]

Oke, here is a short example, same effect:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - input_select.select_device
  - type: conditional
    conditions:
      - entity: input_select.select_device
        state: TV
    card:
      type: picture-elements
      image: /local/640x360transparant.png
      elements:
        - type: state-icon
          icon: mdi:power
          tap_action:
            action: call-service
            service: remote.send_command
            service_data:
              command: PowerToggle
              device: Tv woonkamer
              delay_secs: 0.4
            target:
              entity_id: remote.harmony_hub
          entity: remote.harmony_hub
          style:
            top: 5%
            left: 5%
            transform: scale(1.25)

replace example image and entities with own.

[ildar170975]

Here is from Win10+Chrome (2024.5.0, default theme):

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - input_select.test_value
  - type: conditional
    conditions:
      - entity: input_select.test_value
        state: one
    card:
      type: picture-elements
      image: /local/images/test/blue.jpg
      elements:
        - type: state-icon
          icon: mdi:power
          entity: sun.sun
          style:
            top: 5%
            left: 5%

Same in iOS companion app (iPad Air 2, iOS 15.x)

[HuisAutomatisering]

So it seems a theme-related issue. This is the relevant toppart of my configuration.yaml

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes:
    theme1:
      primary-color: "#3593bc"
      modes:
        light:
          lovelace-background: 'center / cover no-repeat url("/local/Desert4.png") fixed'
        dark:
          lovelace-background: 'center / cover no-repeat url("/local/backgroundpaars.jpg") fixed'
    theme2:
      primary-color: "#3593bc"
      modes:
        light:
          lovelace-background: 'center / cover no-repeat url("/local/Desert4.png") fixed'
          primary-color: "#3593bc"                               # Menu bar
          ha-card-border-color: rgba(224, 224, 224, 0.95)        # Card borders
          ha-card-background: rgba(256, 256, 256, 0.95)          # Transparant card backgrounds
          card-background-color: rgba(256, 256, 256, 0.9)        # Transparant popup menu
          dialog-backdrop-filter: blur(5px)                      # Dialogue blur
          ha-card-backdrop-filter: blur(5px)                     # Card background blur
        dark:
          lovelace-background: 'center / cover no-repeat url("/local/sky2.jpg") fixed'
          primary-color: "#3593bc"
          ha-card-border-color: rgba(64,64,64, 0.5)
          ha-card-background: rgba(0, 0, 0, 0.5)
          card-background-color: rgba(32, 32, 32, 0.95)
          dialog-backdrop-filter: blur(5px)
          ha-card-backdrop-filter: blur(5px)

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
#group: !include groups.yaml

[ildar170975]

Do you observe the issue with a DEFAULT theme?
(btw looking at your themes code I see no logical explanation how these variables for colors & filters may affect z-index)

[HuisAutomatisering]

No this issue is gone with the default theme. (I also don't know why).

Proof of concept :-)

[ildar170975]

theme1:

theme1:
  primary-color: "#3593bc"
  modes:
    light:
      lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
    dark:
      lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'

theme2:

theme2:
  primary-color: "#3593bc"
  modes:
    light:
      lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
      primary-color: "#3593bc"                               # Menu bar
      ha-card-border-color: rgba(224, 224, 224, 0.95)        # Card borders
      ha-card-background: rgba(256, 256, 256, 0.95)          # Transparant card backgrounds
      card-background-color: rgba(256, 256, 256, 0.9)        # Transparant popup menu
      dialog-backdrop-filter: blur(5px)                      # Dialogue blur
      ha-card-backdrop-filter: blur(5px)                     # Card background blur
    dark:
      lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
      primary-color: "#3593bc"
      ha-card-border-color: rgba(64,64,64, 0.5)
      ha-card-background: rgba(0, 0, 0, 0.5)
      card-background-color: rgba(32, 32, 32, 0.95)
      dialog-backdrop-filter: blur(5px)
      ha-card-backdrop-filter: blur(5px)

BINGO ))))))))))

[ildar170975]

2024.5 contains changes for variables.
Suggest to reflect in the issue's title that using theme vars cause the problem.

Minimal test example:

theme3:
  ha-card-backdrop-filter: blur(5px)

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_select.test_value
  - type: picture-elements
    image: /local/images/test/blue.jpg
    elements:
      - type: state-icon
        entity: sun.sun
        style:
          top: 50%
          left: 50%

[HuisAutomatisering]

Title updated.

Is it something you can fix? Or is it me that should not do the ha-card-backdrop-filter: blur(5px) , which is beatiful by the way...

[ildar170975]

Actually, this is not about picture elements.
Z-index was broken after several PRs related to theme vars.

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_select.test_value
  - type: entity
    entity: sun.sun

theme3:
  ha-card-backdrop-filter: blur(5px)

[HuisAutomatisering]

Oke but do I need to do anything now? Is the z-index being fixed or do i need to open another issue somewhere else?

[ildar170975]

If you are asking me - I am not doing this))).
It depends on when someone from frontend dev team cares to fix it...
Probably the person who added all these PRs recently.

[ildar170975]

I would suggest to:

1. Rename the issue to
   z-index broken when using "ha-card-backdrop-filter" var in a theme
2. Edit the 1st post - add a link to the post with a short example.

[Mariusthvdb]

this actually goes beyond the vertical-stack.

I can reproduce with 2 entities cards, where the top entities card contains the dropdown, it will not be visible over the second entities card, when using the ha-card-backdrop-filter:

with filter:

without:

[ildar170975]

vertical stack was only used to place two cards one by one.

[Mariusthvdb]

as I said, this goes beyond that. demonstrating it goes beyond the border of 2 core cards is rather relevant info.

btw, if this is for blurring background when more-info popups are shown, you can use:

  card-mod-more-info-yaml: |

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px) !important;
        -webkit-backdrop-filter: blur(17px) !important;
      }

in a card-mod-theme and dont have the issue in the regular Dashboard

[Nezz]

This is the underlying issue:

The issue is caused by the backdrop-filter creating a new stacking context for each card. Since this is set on each card individually, the dropdown's z-index will not apply to other cards and they will end up getting drawn on top.
Nezz/homeassistant-visionos-theme#4

I can't really think of a way to work around this. Backdrop filters are problematic because they live in their own context that affects both z-index and positioning (see Nezz/homeassistant-visionos-theme#2).