Visual bug when scrolling over button via app/mobile device

[simphide]

Checklist

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

Describe the bug When scrolling over a button on the HASS app the button itself and surrounding buttons get "brighter". This problem doesn't occur on the desktop

Version of the card Version: 4.1.1

To Reproduce This is the configuration I used (based on your example code):

type: grid
title: Example
cards:
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
  - type: custom:button-card
    entity: light.badezimmer
    name: <3 Apple
    icon: mdi:fire
    show_state: true
    styles:
      card:
        - width: 100px
        - height: 100px
      grid:
        - grid-template-areas: '"i" "n" "s"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      img_cell:
        - align-self: start
        - text-align: start
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - text-transform: lowercase
      state:
        - justify-self: start
        - padding-left: 10px
    state:
      - value: 'off'
        styles:
          card:
            - filter: opacity(50%)
          icon:
            - filter: grayscale(100%)
square: true
columns: 3
view_layout:
  column: 3

Screenshots Normal:

Scrolling:

Expected behavior A clear and concise description of what you expected to happen. No glitching hover effects (I guess what it is?)

Desktop (please complete the following information):

• Browser Chrome
• Version 118.0.5993.117

Smartphone (please complete the following information):

• Device: iPhone 13
• OS: iOS 17.1
• Browser Home Assistant App
• Version 2023.7

Additional context

[simphide]

This bug is not related to the grid component! I have tested it without the grid and the same problem occurred

[simphide]

This is only reproducable with Home Assistant 2023.10!

This was sadly false... I can also reproduce the problem in 2023.9

[simphide]

It looks like the bug only occurs with iOS/macOS/Safari...

[oliroche]

Same behavior. However, I observe that only the buttons below the one I am pressing will light up. Could be related to the custom grid no?

[simphide]

Same behavior. However, I observe that only the buttons below the one I am pressing will light up. Could be related to the custom grid no?

No, I have also tested it on a seperate dashboard without a grid

[oliroche]

Just tested further, looks like the "opacity" param is causing the issue. All the buttons for which I removed it do not light up anymore.

Confirmed, removed the "opacity" and this is now solved for me.

[sunde41]

same problem in 2023.11.*

[ultimate-tester]

I have the same issue. The opacity flickers. My buttons are also wrapped in a custom grid layout. Removing the opacity attribute fixed it for me too but I'd really like to get the core issue fixed so I can use opacity again.

[simphide]

Seems to be fixed with latest iOS version

[ultimate-tester]

Seems to be fixed with latest iOS version

Fully sceptical upgraded to the latest iOS. Can confirm, it's indeed fixed now.