Unable to scroll popup on iOS 26.4

[londondev77]

Describe the bug
I don't know if this is an issue with the HA companion app or Bubble Card itself.

The following popup doesn't scroll when viewed on both an iPhone 15 Pro and an iPhone 17 Pro. It scrolled fine on the iPhone 15 Pro before upgrading from iOS 26.3 to 26.4 (I didn't test on the 17 Pro before upgrading). If I make the content of the popup a bit longer, the scrolling then works.

To Reproduce
Steps to reproduce the behavior:

1. Add the YAML from below to a dashboard
2. Click on the tile to bring up the popup
3. Note that it doesn't scroll (although maybe it will on shorter displays?)

Expected behavior
Content of popup should scroll

type: grid
cards:
  - type: heading
    heading: New section
  - type: custom:bubble-card
    card_type: button
    sub_button:
      main:
        - name: HVAC modes menu
          select_attribute: hvac_modes
          state_background: false
          show_arrow: false
          sub_button_type: select
      bottom: []
    name: Hallway
    entity: climate.hallway
    button_type: state
    show_state: false
    show_attribute: true
    attribute: current_temperature
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#popup"
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: "#popup"
        button_type: name
        sub_button:
          main: []
          bottom: []
        name: Hallway
        icon: mdi:home
        card_layout: large
      - type: thermostat
        entity: climate.hallway
        show_current_as_primary: true
        features:
          - type: climate-hvac-modes
          - type: climate-preset-modes
            style: dropdown
      - type: heading
        icon: mdi:fridge
        heading: Selectors
        heading_style: title
      - type: tile
        entity: number.hallway_temperature_selector
        vertical: false
        features:
          - style: slider
            type: numeric-input
        features_position: inline
      - type: tile
        entity: input_button.start
        name:
          type: entity
        color: green
        hide_state: true
        vertical: false
        features_position: bottom

Information (please complete the following information):

• OS: iOS 26.4
• Browser/App: Home Assistant Companion App 2026.2.1 (2026.1766)
• Bubble Card version: 3.1.4
• Home Assistant version: 2026.3.4

Let me know if you need me to test something!

[yeyeoke]

I dont have much of value to add, other than to confirm that i’m experiencing the same issue on both iPhone and Mac.

[nicolinden]

Same here.

I can scroll on my Mac in Safari and chrome, I can scroll in iOS in Safari and even on iPad OS 26.4 in the companion app as well (when I reduce the app size a phone layout. But in the companion app on iOS (iPhone 15 Pro Max) I cannot scroll anymore and I am pretty sure that this happend since my upgrade to iOS 26.4.

A small addition, a colleague of mine is NOT having this issue so it has to be something in the way we created the bubble card popup. Mine code is shown below

type: vertical-stack
cards:

• type: custom:bubble-card
  card_type: pop-up
  hash: "#pop-up-kantoor"
  button_type: switch
  slider_fill_orientation: left
  slider_value_position: right
  entity: light.kantoor_lampen
  tap_action:
  action: perform-action
  perform_action: script.lights_area_counted_control
  target: {}
  data:
  area_id: kantoor
  action: toggle
  light_slider_type: brightness
  icon: hue:room-office
  name: Kantoor
  sub_button:
  main:
  - name: Sensors
  buttons_layout: inline
  group:
  - entity: binary_sensor.kantoor_lights_on
  name: Toner Low
  icon: mdi:printer-pos-alert
  content_layout: icon-left
  visibility:
  - condition: state
  entity: binary_sensor.hp_printer_low_toner
  state: "on"
  - entity: cover.kantoor_screens
  show_background: false
  show_state: false
  icon: mdi:window-shutter
  name: Cover
  visibility:
  - condition: state
  entity: binary_sensor.kantoor_cover_open
  state: "off"
  scrolling_effect: false
  - entity: media_player.kantoor_2
  sub_button_type: default
  show_background: false
  show_state: false
  slider_fill_orientation: left
  slider_value_position: right
  slider_live_update: false
  show_name: false
  icon: ios:homepod-mini-2-fill
  show_last_changed: false
  show_last_updated: false
  show_attribute: false
  attribute: app_name
  name: Speaker
  hide_when_parent_unavailable: false
  visibility:
  - condition: state
  entity: media_player.kantoor_2
  state: playing
  - entity: sensor.kantoor_homepod_temperatuur
  content_layout: icon-left
  name: Temperatuur
  show_state: true
  show_last_changed: false
  show_name: false
  show_background: false
  force_icon: false
  show_attribute: false
  - entity: sensor.kantoor_homepod_luchtvochtigheid
  state_background: false
  show_state: true
  show_background: false
  name: Luchtvochtigheid
  bottom: []
• type: media-control
  entity: media_player.kantoor_2
  name: Kantoor Homepod
• type: custom:bubble-card
  card_type: separator
  sub_button:
  main: []
  bottom: []
  name: Lights
  icon: mdi:lightbulb-on
• type: horizontal-stack
  cards:
  • type: custom:bubble-card
    card_type: button
    button_type: slider
    sub_button:
    main: []
    bottom: []
    entity: light.shapes_11a9
    name: Shapes
    icon: ios:triangle
    slider_fill_orientation: left
    slider_value_position: right
    light_slider_type: brightness
    tap_action:
    action: toggle
    button_action:
    tap_action:
    action: more-info
  • type: custom:bubble-card
    card_type: button
    button_type: slider
    sub_button:
    main: []
    bottom: []
    entity: light.bureau_lightstrip
    name: Bureau
    icon: hue:lightstrip
    slider_fill_orientation: left
    slider_value_position: right
    light_slider_type: brightness
    tap_action:
    action: toggle
    button_action:
    tap_action:
    action: more-info
• type: horizontal-stack
  cards:
  • type: custom:bubble-card
    card_type: button
    button_type: slider
    sub_button:
    main: []
    bottom: []
    entity: light.kantoor_plafond_2
    name: Plafond
    icon: hue:bulb-filament-hung
    slider_fill_orientation: left
    slider_value_position: right
    light_slider_type: brightness
    tap_action:
    action: toggle
    button_action:
    tap_action:
    action: more-info
  • type: custom:bubble-card
    card_type: button
    button_type: slider
    sub_button:
    main: []
    bottom: []
    entity: light.kantoor_bloom
    name: Dressoir
    icon: hue:bloom
    slider_fill_orientation: left
    slider_value_position: right
    light_slider_type: brightness
    tap_action:
    action: toggle
    button_action:
    tap_action:
    action: more-info
• type: horizontal-stack
  cards:
  • type: custom:bubble-card
    card_type: button
    button_type: switch
    sub_button:
    main: []
    bottom: []
    entity: light.psv_lamp
    icon: ios:light-panel-fill
    tap_action:
    action: toggle
    button_action:
    tap_action:
    action: more-info
    slider_fill_orientation: left
    slider_value_position: right
    light_slider_type: brightness
• type: custom:bubble-card
  card_type: separator
  sub_button:
  main: []
  bottom: []
  name: Devices
  icon: ios:printer
• type: entities
  show_header_toggle: false
  entities:
  • type: custom:fold-entity-row
    head:
    type: custom:mushroom-template-card
    primary: HP Color Laser 150nw
    secondary: "{{ states('sensor.hp_printer_status_clean') | capitalize }}"
    icon: mdi:printer
    icon_color: |
    {% if is_state('sensor.hp_printer_status_clean','printing') %}
    amber
    {% elif is_state('sensor.hp_printer_status_clean','offline') %}
    red
    {% else %}
    grey
    {% endif %}
    tap_action:
    action: none
    entities:
    • type: custom:layout-card
      layout_type: grid
      layout:
      grid-template-columns: 1fr 1fr
      grid-gap: 8px
      cards:
      • type: custom:mushroom-template-card
        primary: Black
        secondary: "{{ states('sensor.hp_toner_black') }}%"
        icon: mdi:circle
        icon_color: black
      • type: custom:mushroom-template-card
        primary: Cyan
        secondary: "{{ states('sensor.hp_toner_cyan') }}%"
        icon: mdi:circle
        icon_color: cyan
      • type: custom:mushroom-template-card
        primary: Magenta
        secondary: "{{ states('sensor.hp_toner_magenta') }}%"
        icon: mdi:circle
        icon_color: pink
        card_mod:
        style: |
        ha-card {
        border: none;
        box-shadow: none;
        background: none;
        }
      • type: custom:mushroom-template-card
        primary: Yellow
        secondary: "{{ states('sensor.hp_toner_yellow') }}%"
        icon: mdi:circle
        icon_color: yellow
• type: custom:bubble-card
  card_type: separator
  sub_button:
  main: []
  bottom: []
  name: Cover
  icon: mdi:window-shutter
• type: custom:bubble-card
  card_type: cover
  sub_button:
  main: []
  bottom: []
  entity: cover.kantoor_screens
  name: Screen
  icon_open: ios:roller-shade-open
  icon_close: ios:roller-shade-closed
  title: Kantoor

[intelligentrascal]

Same here. Exact issue on Android, MacOS and windows.

[dedgedesign]

Same observation here, but it seems to work for some popups and not the others, although they contains very similar cards

[JGSBP2S]

Same her on iOS and MacOS

[nicolinden]

Scrolling issue caused by dynamic content (possible root cause + workaround)

I think I may have found the cause of the scrolling issue. I use pop-ups for all my rooms and most of them do not contain enough content to require scrolling, but some do. The issue only seems to occur in pop-ups that require a small amount of scrolling, not in cases with large scrollable content.

From my testing, it seems to occur mainly in more complex pop-ups (so kudos to anyone running into this 😄).

After multiple tests, I narrowed it down to components that introduce dynamic height changes.

Key findings

• In one room, the issue was triggered by using custom:fold-entity-row.
  This card can expand/collapse its content. When I expanded it, scrolling suddenly started working.

• In another room, I didn’t use fold-entity-row, but I did use conditional cards, and the same issue occurred there.

Conclusion

My assumption is that this is related to incorrect initial height calculation of the popup when dynamic content is involved (collapsed rows, conditional rendering, etc.).

It looks like the popup is not considered scrollable until something changes the layout (e.g. expanding a row), which forces a recalculation.

Workaround

I was able to fix the issue by adding some “dummy” content at the end of the popup to force sufficient initial height:

- type: custom:mushroom-template-card
  primary: ""
  secondary: ""
  icon: ""

[dedgedesign]

In my case, the last card at the bottom at the failing popup was a classic horizontal-stack card with 2 Bubble button cards. Nothing special
I solved the issue by adding a Mushroom empty card after that.

[eTron]

Same issue. Also on previous B1 and B2. Currently on B3.

Seeing scrolling issues in other areas of the interface as well. Such as the scenes section in settings. It’ll only scroll down so far before it gets wonky. Not sure if the extra info helps.

[Clooos]

Hi! I've found the cause and the fix is (thankfully) pretty simple, in the meantime you can just add this to your default module:

.bubble-pop-up {
  height: 100%;
}

This fix is needed if you've update HA to 2026.4, I don't know if this is fixing the iOS 26.4 issue since I haven't had time to test this version yet, so if anyone can try the fix above on that version it would be really appreciated 😄

[eTron]

Just tried it and it works. Thank you!

[JGSBP2S]

Working on HAOS 2026.4 and iOS 26.4.

Thanks for the quick fix 😀

[londondev77]

Hi! I've found the cause and the fix is (thankfully) pretty simple, in the meantime you can just add this to your default module:

.bubble-pop-up {
height: 100%;
}
This fix is needed if you've update HA to 2026.4, I don't know if this is fixing the iOS 26.4 issue since I haven't had time to test this version yet, so if anyone can try the fix above on that version it would be really appreciated 😄

I might be implementing it incorrectly but this doesn't appear to be working on iOS 26.4. I tried 3 different ways:

1. In the default module
2. Putting the style directly in one of the popups
3. Implementing it in a custom integration I'm developing

Happy to test further iterations...

[Clooos]

@londondev77 Hi! That's what I was expecting, I believe you don't even have updated to HA 2026.4 beta. The iOS 26.4 scrolling issue is (I'm now sure of that) different to the one introduced in the HA beta (the one I've fixed), I will have to update my iPad to try to reproduce that specific case.