There are phantom traces on the background.

[ChapayTv]

When flipping pages in the Home Assistant mobile app, phantom white traces remain after switching to the desired page. How to solve this problem, here is the code I use and a video with the error.

Screenrecorder-2024-10-15-14-45-41-864.mp4

type: horizontal-stack
cards:
  - type: custom:local-conditional-card
    id: tab1
    default: show
    persist_state: false
    card:
      type: vertical-stack
      cards:
        - type: custom:paper-buttons-row
          styles:
            background: linear-gradient(0deg, rgba(16,50,55,1) 0%, rgba(9,64,73,0) 100%);
            border-radius: 18px
            justify-content: center
            width: max-content
            margin: 0px auto 12px auto
          buttons:
            - layout: name
              name: Tab 1
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: show
                    - tab2: hide
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: "#F3C623"
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 2
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: show
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 3
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: hide
                    - tab3: show
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
        - type: custom:mushroom-title-card
          title: Hello, 1
  - type: custom:local-conditional-card
    id: tab2
    default: hide
    persist_state: false
    card:
      type: vertical-stack
      cards:
        - type: custom:paper-buttons-row
          styles:
            background: linear-gradient(0deg, rgba(16,50,55,1) 0%, rgba(9,64,73,0) 100%);
            border-radius: 18px
            justify-content: center
            width: max-content
            margin: 0px auto 12px auto
          buttons:
            - layout: name
              name: Tab 1
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: show
                    - tab2: hide
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 2
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: show
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: "#F3C623"
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 3
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: hide
                    - tab3: show
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
        - type: custom:mushroom-title-card
          title: Hello, 1
  - type: custom:local-conditional-card
    id: tab3
    default: hide
    persist_state: false
    card:
      type: vertical-stack
      cards:
        - type: custom:paper-buttons-row
          styles:
            background: linear-gradient(0deg, rgba(16,50,55,1) 0%, rgba(9,64,73,0) 100%);
            border-radius: 18px
            justify-content: center
            width: max-content
            margin: 0px auto 12px auto
          buttons:
            - layout: name
              name: Tab 1
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: show
                    - tab2: hide
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 2
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: show
                    - tab3: hide
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: none
                  border-radius: 18px
                  height: 34px
                  display: flex
            - layout: name
              name: Tab 3
              tap_action:
                action: fire-dom-event
                local_conditional_card:
                  action: set
                  ids:
                    - tab1: hide
                    - tab2: hide
                    - tab3: show
              styles:
                name:
                  color: rgb(244, 246, 255)
                  padding: 0 32px
                button:
                  background: "#F3C623"
                  border-radius: 18px
                  height: 34px
                  display: flex
        - type: custom:mushroom-title-card
          title: Hello, 3

[PiotrMachowski]

It is a problem with custom:paper-buttons-row, not with this card

[1iverea9er]

@ChapayTv
Hi, you can fix that by adding following code in slyles section of custom:paper-buttons-row for every button

  styles:
    ripple:
      color: rgba(0,0,0,0)