Issue with Browser Mod Popup on a Wall Panel Tablet: Requires Occasional Refresh, Window Focus

Hey everyone,

I’ve recently implemented a Browser Mod’s Popup feature to display a Popup containing 2 front cameras when a Doorbell is rang. The automation targets a Wall Panel tablet (Samsung Galaxy Tab A9+) running Fully Kiosk. While I’ve gotten it to work in general, there are 2 issues I’m trying to solve:

  1. Popup automation requires an occasional page refresh. It will work for a few hours without a refresh, and then requires a refresh in order for the popup to appear.

  2. Initially, after the page refresh, the popup will have a white “focus” rectangle around the bottom portion of the popup window (everything except the header). If I click on the header to change the “focus”, it shows normally the next time around.

I’ve made a video demonstrating both of these issues: Google Drive link.

I have tried switching cache types in Fully Kiosk between “Always Maintain Cache”, “Never Maintain Cache” and “Clear Cash on Refresh”. Neither of these options have had an effect.

When removing device targeting, I can confirm that popup loads on all other browsers apart from the Wall Panel tablet. Therefore the issue appears to be specific to the tablet.

Sharing the code of the Popup automation:

alias: Doorbell Wall Panel Popup
description: ""
trigger:
  - platform: state
    entity_id:
      - binary_sensor.reolink_doorbell_visitor
    from: "off"
    to: "on"
condition: []
action:
  - service: browser_mod.popup
    data:
      dismissable: true
      autoclose: false
      title: Doorbell
      timeout: 60000
      style: |
        --popup-border-radius: 20px;
        --popup-max-width: 900px;
        --mdc-theme-surface: rgba(28,28,28,0.8);
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog__scrim {
              background-color: rgba(0,0,0,0.5) !important;
              backdrop-filter: blur(5px);
            }
      content:
        type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-rows: auto
          grid-template-columns: 80% 20%
          margin: "-10px 18px -10px -5px"
          grid-template-areas: |
            "cam1 bt1"
            "cam1 bt2"
            "cam2 bt3"
            "cam2 bt4"
        cards:
          - type: custom:webrtc-camera
            view_layout:
              grid-area: cam1
            url: REDACTED
            muted: true
            ui: true
            digital_ptz:
              mouse_drag_pan: false
              mouse_wheel_zoom: false
              mouse_double_click_zoom: false
              touch_drag_pan: false
              touch_pinch_zoom: false
              touch_tap_drag_zoom: false
              persist: false
            poster: >-
              REDACTED
            background: false
            style: >-
              video {object-fit: cover; object-position: bottom;} .mode
              {display: none;} .fullscreen {display: none} .screenshot {display:
              none} .pictureinpicture {display: none}
            card_mod:
              style: |
                ha-card {
                --ha-card-border-radius: 20px;
                height: 300px;
                width: 533px;
                }
          - type: custom:webrtc-camera
            view_layout:
              grid-area: cam2
            url: REDACTED
            muted: true
            ui: true
            digital_ptz:
              mouse_drag_pan: false
              mouse_wheel_zoom: false
              mouse_double_click_zoom: false
              touch_drag_pan: false
              touch_pinch_zoom: false
              touch_tap_drag_zoom: false
              persist: false
            poster: >-
              REDACTED
            background: false
            style: >-
              video {object-fit: cover; object-position: bottom;} .mode
              {display: none;} .fullscreen {display: none} .screenshot {display:
              none} .pictureinpicture {display: none}
            card_mod:
              style: |
                ha-card {
                --ha-card-border-radius: 20px;
                height: 300px;
                width: 533px;
                }
          - type: custom:button-card
            view_layout:
              grid-area: bt1
            entity: cover.front_gate
            name: Front Gate
            show_state: true
            state:
              - value: open
                styles:
                  icon:
                    - color: rgb(244,180,0)
                  card:
                    - background-color: rgba(35,35,35,0.8)
                  name:
                    - color: white
                  state:
                    - color: rgb(200,200,200)
            tap_action:
              action: toggle
            styles:
              icon:
                - padding-right: 60px
                - padding-bottom: 35px
                - color: grey
              card:
                - width: 145px
                - height: 145px
                - border-radius: 20px
                - background-color: rgba(35,35,35,0.8)
              grid:
                - grid-template-areas: "\"i\" \"n\" \"s\""
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 2px
                - font-weight: italic
                - font-size: 13px
                - text-transform: capitalize
              state:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 6px
                - font-size: 13px
                - color: grey
          - type: custom:button-card
            view_layout:
              grid-area: bt2
            entity: cover.garage_door
            name: Garage
            show_state: true
            state:
              - value: open
                styles:
                  icon:
                    - color: rgb(244,180,0)
                  card:
                    - background-color: rgba(35,35,35,0.8)
                  name:
                    - color: white
                  state:
                    - color: rgb(200,200,200)
            tap_action:
              action: toggle
            styles:
              icon:
                - padding-right: 65px
                - padding-bottom: 25px
                - color: grey
                - width: 85px
              card:
                - width: 145px
                - height: 145px
                - border-radius: 20px
                - background-color: rgba(35,35,35,0.8)
              grid:
                - grid-template-areas: "\"i\" \"n\" \"s\""
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 2px
                - font-weight: italic
                - font-size: 13px
                - text-transform: capitalize
              state:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 6px
                - font-size: 13px
                - color: grey
          - type: custom:button-card
            view_layout:
              grid-area: bt3
            entity: switch.shellyswitch25_483fda75999a_channel_1
            name: Front Light
            icon: mdi:lightbulb-group-outline
            show_state: true
            state:
              - value: "on"
                styles:
                  icon:
                    - color: rgb(244,180,0)
                  card:
                    - background-color: rgba(35,35,35,0.8)
                  name:
                    - color: white
                  state:
                    - color: rgb(200,200,200)
            tap_action:
              action: toggle
            styles:
              icon:
                - padding-right: 65px
                - padding-bottom: 30px
                - color: grey
                - width: 65px
              card:
                - width: 145px
                - height: 145px
                - border-radius: 20px
                - background-color: rgba(35,35,35,0.8)
              grid:
                - grid-template-areas: "\"i\" \"n\" \"s\""
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 2px
                - font-weight: italic
                - font-size: 13px
                - text-transform: capitalize
              state:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 6px
                - font-size: 13px
                - color: grey
          - type: custom:button-card
            view_layout:
              grid-area: bt4
            entity: switch.shellyswitch25_483fda755250_channel_1
            name: Entrance
            icon: mdi:wall-sconce-flat
            show_state: true
            state:
              - value: "on"
                styles:
                  icon:
                    - color: rgb(244,180,0)
                  card:
                    - background-color: rgba(35,35,35,0.8)
                  name:
                    - color: white
                  state:
                    - color: rgb(200,200,200)
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            styles:
              icon:
                - padding-right: 68px
                - padding-bottom: 25px
                - color: grey
                - width: 65px
              card:
                - width: 145px
                - height: 145px
                - border-radius: 20px
                - background-color: rgba(35,35,35,0.8)
              grid:
                - grid-template-areas: "\"i\" \"n\" \"s\""
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 2px
                - font-weight: italic
                - font-size: 13px
                - text-transform: capitalize
              state:
                - justify-self: start
                - padding-left: 12px
                - padding-bottom: 6px
                - font-size: 13px
                - color: grey
    target:
      device_id: f4ecdcb38f68f2d4c8aa310c6726f5a7
mode: single

I’d really appreciate any help around resolving these two issues. Thanks in advance!