"lock" option not working on mobile devices since update to 4.0.0

[TheBToby]

Checklist

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

Describe the bug The "lock" option is not working on my mobile devices (iOS) after upgrading to 4.0.0 (app and browser). Works with no issue on the desktop browser version (Windows). The button still works (action), but does not respect the lock functionality and also does not show the lock icon.

Version of the card Version: 4.0.0

To Reproduce This is the configuration I used:

show_name: true
show_icon: true
type: custom:button-card
tap_action:
  action: toggle
entity: input_boolean.all_off
icon: mdi:power
lock:
  enabled: true
  duration: 5

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

Expected behavior Lock functionality working on the mobile version is the same as before upgrading to 4.0.0 (as described in the config reference and working on the desktop version)

Desktop (please complete the following information):

• Browser [chrome]
• Version [115.0.5790.110]

Smartphone (please complete the following information):

• Device: [iPhone 14]
• OS: [iOS 16.5.1]
• Browser [chrome]
• Version [115.0.5790.130]

Additional context Add any other context about the problem here.

[RomRider]

I don't have a iDevice to test :( But as always apple is doing their own interpretation of HTML/CSS... It's always a PITA. Will see what I can do

[Mariusthvdb]

All of my locks are working as before and confirmation (if configured also)

iPhone 13 Pro here

[TheBToby]

Funny thing: just checked with my wife’s Android phone… no issue there 🤔

[TheBToby]

double-checked on my MacBook... no issue there as well...

[RomRider]

Did you clear the cache of the ios app?

[TheBToby]

Yes, I did. I also rebooted the iPhone, Besides the official Home Assistant app for iOS and Chrome I also checked with Safari. Same issue but only on my iOS device (and on my son's iPhone XR, where I double-checked).

[Mariusthvdb]

could you try this:

lock:
  tap_action:
    action: more-info
    haptic: light
  lock:
    enabled: true
    unlock: hold
    exemptions:
      - username: !secret button_unlock_name_1
      - username: !secret button_unlock_name_2
  confirmation:
    text: >
      [[[ return `Wil je ${entity.attributes.friendly_name} schakelen?`; ]]]
# [[[ return 'Are you sure you want to toggle ' + entity.attributes.friendly_name + '?'; ]]]
  styles:
    lock:
      - color: red
      - icon: mdi:lock-alert
      - z-index: 1

which is what I use and see working correctly on all iOS devices

not even sure we still need the z-index (which was required after HA Frontend changed things in core)

[zSprawl]

I too have the same issue on iPhone. I rolled back to 3.5, and they reappeared. Ironically it’s the phone that needs the locks the most…

[TheBToby]

@Mariusthvdb I just tested the configuration you posted. Same issue. The lock symbol appears on all non-iOS-based devices but not on my iPhones.

[Mariusthvdb]

How odd..

To be sure: did you reset Frontend cache in the companion app settings? (Under error tracking)

[TheBToby]

@Mariusthvdb Yes, first thing I did 😁

[Mariusthvdb]

Aarrghh, then I am out of ideas .

Can't see a single issue on the locks here. Hope Jerome will find it for you

[S-Przybylski]

After updating to 4.0.1 I got also issues in my dashboard: I noticed that the lock disapeared and is not functioning. I saw this on Android using Kiosk browser and also on PC using Firefox. In addition I noticed that the button size is somehow enlarged a little bit, so that my dashboard is not fitting anymore. Workaround: I tried to add the parameter aspect_ration (in my case: 1.8/1) and then everything works again.

Maybe also try to use the aspect_ratio to verify.

[GertJanArts]

Same here after update to 4.0 / 4.0.1 on IOS 17 beta. Companion app 2023.7. No lock icon and no lock functionality. Working fine in Chrome on IOS

[OssiOswolf]

Same here on Android, the lock is working on my tablet with Companion App 2023.6.0 from fdroid, but not working with Companion App 2023.6.0 (same source) on my phone. Updated to 2023.7.0 on the phone, but no change. Yes, cache deleted ... Experimented with the aspect_ratio and can confirm, that the icon + functionality are back, so this seams to be a valid workaround, but messes my card up, hehe

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0-dev.3 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[RomRider]

Note to myself: Don't F#(@$* touch CSS ever again...

[RomRider]

Could anyone confirm this is now working with the latest beta?

[Mariusthvdb]

I have it working in the iOS app, Safari desktop Mac browser, Chrome and Firefox. then again, it has always worked, so I might be not the best person to confirm...

HA 2023.8.0b4

[zSprawl]

Yep the fix in the beta works great for me!

[GertJanArts]

Great! Works for me too (HA 2023.462 on iPhone)

[TheBToby]

The fix is working here as well! THX!

[github-actions[bot]]

:tada: This issue has been resolved in version 4.1.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: