Ripple effect on devices using safari is shown over the rounded borders.

[digaus]

Describe the bug

Ripple effect on devices using safari is shown over the rounded borders.

Related: https://stackoverflow.com/a/64885552

To Reproduce Test button-card on safari and click on it.

Expected behavior Ripple effect should be applied correctly

Screenshots If applicable, add screenshots to help explain your problem.

Additional context

We can fix this by adding transform: translateZ(0) to the ha-card

[antonio1475]

Same thing in the iOS app.

Thank you for the workaround. I was doing:

card_mod:
  style: |
    mwc-ripple {display:none;}

to remove the ripple entirely because of it. But yours:

card_mod:
  style: |
    ha-card {transform: translateZ(0);}

keeps the ripple, but within the card. In the Room Card template, line ~95 does it too:

    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"
      - transform: "translateZ(0)" <-- this

I suppose you don't have a solution for the Room Card small buttons (entities)? I will keep testing...

Edit to add: adding it at the end of the template fixes the mini icons too:

    card:
      - height: "100%"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"
      - transform: "translateZ(0)"  <-- this

thank you @digaus !! I hope this can get fixed for everyone...

[BlackStar-95]

What should i do in my case? how can i add transform: "translateZ(0)" ?

title: "Home"
path: "home"
cards:
  - type: "custom:button-card"
    template: "card_esh_welcome"
    triggers_update: "input_boolean.minimalist_dropdown"
    variables:
      ulm_card_esh_welcome_collapse: input_boolean.minimalist_dropdown
      ulm_weather: "weather.openweathermap"
      entity_1:
        nav: "house"
        icon: "mdi:home"
        name: "House"
        color: "blue"
      entity_2:
        nav: "lights"
        icon: "mdi:lightbulb"
        name: "Lights"
        color: "yellow"
      entity_3:
        nav: "security"
        icon: "mdi:shield"
        name: Secure
        color: "green"
      entity_4:
        nav: "network"
        icon: "mdi:nas"
        name: Lab
        color: "purple"
      entity_5:
        nav: "network"
        icon: "mdi:flask"
        name: Lab
        color: "red"