iOS popup background is not following theme styling after update

[zachzaf]

My Home Assistant version: 2023.8.4

What I am doing:

I updated home assistant core to 2023.8.4 and browser_mod to 2.3.0 at the same time. After the update, the browser_mod popups in iOS are not loading the theme configuration anymore. Happens with all popups in the iOS app (both on phone and tablet).

What I expected to happen:

This is how the popup looked like before the update:

What happened instead:

This is how the popup looks like now in the app:

Minimal steps to reproduce:

This only seems to be an issue with the popup in iOS. I checked the same popup in my Windows desktop browser and it looks as expected:

I double-checked that I have the same theme selected on both devices.

# The least amount of code or steps possible to reproduce my error

## Theme config:
  # Background blur
  dialog-backdrop-filter: blur(15px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.6)
  # Browser mod popup
  popup-background-color: rgba(0,0,0,0)

## Lovelace code for popup:

tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-title-card
                title: Climate
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    icon: mdi:close
                    tap_action:
                      action: call-service
                      service: browser_mod.close_popup
                      target: {}
                alignment: end
          - type: horizontal-stack
            cards:
              - type: custom:mini-graph-card
                entities:
                  - sensor.weather_station_temperature
                name: Living Room
                line_color: orange
                line_width: 8
                font_size: 75
                show:
                  extrema: true
                card_mod:
                  style: |
                    ha-card {
                    }
                    div.name.flex {
                    font-size: 10px;
                    }
                    span.info__item__time {
                    display: none;
                    }
              - type: custom:mini-graph-card
                entities:
                  - sensor.weather_station_humidity
                name: Living Room
                line_color: cyan
                line_width: 8
                font_size: 75
                show:
                  extrema: true
                card_mod:
                  style: |
                    ha-card {
                    }
                    div.name.flex {
                    font-size: 10px;
                    }
                    span.info__item__time {
                    display: none;
                    }
              - type: custom:mini-graph-card
                entities:
                  - sensor.weather_station_carbon_dioxide
                name: Living Room
                line_color: red
                line_width: 8
                font_size: 75
                show:
                  extrema: true
                card_mod:
                  style: |
                    ha-card {
                    }
                    div.name.flex {
                    font-size: 10px;
                    }
                    span.info__item__time {
                    display: none;
                    }
...
## Rest of the cards removed as it is repetitive.
...

Error messages from the browser console:

card-mod.js?hacstag=190927524322:5 CARD-MOD 3.2.2 IS INSTALLED
card-mod.js?hacstag=190927524322:5 You may not be getting optimal performance out of card-mod.
See https://github.com/thomasloven/lovelace-card-mod#performance-improvements
browser_mod.js:385 BROWSER_MOD 2.3.0 IS INSTALLED    BrowserID: aee0bd97-f4561adb
mobile-home:1 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry
mobile-home:1 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry
vertical-stack-in-card.js?hacstag=142051833044:1 vertical-stack-in-cardVersion: 0.4.4
entities.js:28   SPOTIFY-CARD   Version 2.4.0    
kiosk-mode.js?hacstag=497319128300:1 ≡ kiosk-mode             ⋮
version 3.0.0            ⋮
simple-thermostat.js?hacstag=158654878250:292 simple-thermostat: 2.5.0
mobile-home:1 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mmp-checkbox" has already been used with this registry
stack-in-card.js?hacstag=248954055020:200  STACK-IN-CARD    Version 0.2.0   
mini-graph-card-bundle.js?hacstag=1512800620110:1  MINI-GRAPH-CARD  0.11.0 
layout-card.js?hacstag=156434866244:228 LAYOUT-CARD 2.4.4 IS INSTALLED
mushroom.js?hacstag=444350375305:3082 🍄 Mushroom 🍄 - 3.0.5
main.js?hacstag=237887092130:3  Thermostat Card   Version  1.3.0 
modes-card-4d24524e.js:1   HA-HW-CARD   Version 0.1.2    
honeywell-smb-card.js?hacstag=564152113732:1   HA-HW-CARD   Version 0.1.2    
honeywell-smb-card.js?hacstag=564152113732:83   Honeywell SMB Card   Version 0.1.2    
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Objectcode: "not_found"message: "Subscription not found."[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object
connection.js:311 Uncaught (in promise) Object

---

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.