Not rendering properly on iOS

[Dilergore]

Hi,

Device: iPhone 11 Pro - iOS 13.6 Software: Chrome or Home Assitant app

I can confirm the same popup window works just fine on Desktop Chrome.

As you can see on the screenshot it looks like the slider color is filling the entire bottom side of the screen:

resources:
- url: /hacsfiles/Homekit-panel-card/homekit-panel-card.js
  type: module
- url: /hacsfiles/light-popup-card/light-popup-card.js
  type: module
- url: /hacsfiles/media_player-popup-card/media_player-popup-card.js
  type: module
- url: /hacsfiles/thermostat-popup-card/thermostat-popup-card.js
  type: module
- url: /browser_mod.js
  type: module
- url: /hacsfiles/lovelace-card-mod/card-mod.js
  type: module
- url: /hacsfiles/bkk-stop-card/bkk-stop-card.js
  type: module
- url: /hacsfiles/fkf-garbage-collection-card/fkf-garbage-collection-card.js
  type: module
- url: /hacsfiles/lovelace-more-info-card/more-info-card.js
  type: module

views:
  - title: "Nappali"
    icon: mdi:home-outline
    path: "nappali"
    panel: true
    cards:
      - type: "custom:homekit-card"
        statePositionTop: true
        entities:           
          - title: Világítás
            popup:
              type: custom:light-popup-card
              settings: true
              sliderColoredByLight: true
              actionsInARow: 5
            entities:
              - entity: light.living_room_rgbw
                name: "Nappali LED"
                popupExtend:
                  settingsCard:
                    type: custom:more-info-card
                    cardOptions:
                      entity: light.living_room_rgbw
                  actions:
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_20
                    color: "#FFFFFF"
                    name: "White 20"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_40
                    color: "#FFFFFF"
                    name: "White 40"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_60
                    color: "#FFFFFF"
                    name: "White 60"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_80
                    color: "#FFFFFF"
                    name: "White 80"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_white_100
                    color: "#FFFFFF"
                    name: "White 100"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_red
                    color: "#FF0000"
                    name: "Red"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_green
                    color: "#00FF00"
                    name: "Green"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_blue
                    color: "#0000FF"
                    name: "Blue"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_yellow
                    color: "#FFFF00"
                    name: "Yellow"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_cyan
                    color: "#00FFFF"
                    name: "Cyan"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_magenta
                    color: "#FF00FF"
                    name: "Magenta"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_maroon
                    color: "#800000"
                    name: "Maroon"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_orange
                    color: "#FFA500"
                    name: "Orange"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_brown
                    color: "#A52A2A"
                    name: "Brown"
                  - service: scene.turn_on
                    service_data:
                      entity_id: scene.living_room_seagreen
                    color: "#2E8B57"
                    name: "Sea Green"

[tonioa]

Same issue with Iphone 6

https://ibb.co/nMZDSRb

[m1ke-hub]

It works fine on my iPad in portrait mode, but when I switch to landscape, same as above.

[jimz011]

if it works fine on larger screens probably the slider is too high for ios. You can try lowering the slider/switch height and see if that works.

[Dilergore]

The solution is to config the following for the card: brightnessHeight: 310px brightnessWidth: 110px