Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Opacity does not work with 2021.9.x

See original GitHub issue

Checklist:

[x ] I updated to the latest version available
[x ] I cleared the cache of my browser

Release with the issue: 2021.9.x

Last working release (if known): 2021.8.x

Browser and Operating System: All

Description of problem:

Javascript errors shown in the web inspector (if applicable):

Additional information: Also, the grey circle/oval does not disappear when clicking toggle icon unless you click elsewhere on the screen.

image: /local/floorplan/darkpanel.png
style: |
  ha-card:first-child {
    background: rgba(42, 46, 48, 1)
  }
elements:
  - type: custom:config-template-card
    variables:
      - states['sensor.sunlight_opacity'].state
    entities:
      - sun.sun
      - sensor.sunlight_opacity
    element:
      type: image
      entity: sun.sun
      image: /local/floorplan/transp.png
      action: none
      state_image:
        above_horizon: /local/floorplan/lightpanel.png
        below_horizon: /local/floorplan/transp.png
      style:
        left: 50%
        mix-blend-mode: lighten
        opacity: ${ states['sensor.sunlight_opacity'].state }
    style:
      height: 100%
      left: 50%
      mix-blend-mode: lighten
      opacity: 10%
      top: 50%
      width: 100%
    tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:config-template-card
    variables:
      COUCHB: states['light.couch_light'].attributes.brightness
    entities:
      - light.couch_light
    element:
      type: image
      entity: light.couch_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transcouch.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: ${ states['light.couch_light'].attributes.brightness / 255 }
      width: 100%
      top: 50%
      left: 50%
  - type: custom:config-template-card
    entities:
      - light.table_light
    element:
      type: image
      entity: light.table_light
      image: /local/floorplan/transp.png
      state_image:
        'on': /local/floorplan/transtablamp.png
      tap_action:
        action: none
      style:
        left: 50%
    style:
      mix-blend-mode: lighten
      opacity: >-
        ${states['light.table_light'].state === 'on' ?
        (states['light.table_light'].attributes.brightness / 255) :'0'}
      top: 50%
      width: 100%
      left: 50%