Card crashes Browser. Can't find the error

Hi there,

I have a complex card, that shows my active Movie/Series on an old iPad.
This worked fine over a year since I created it, but with 2023.8 and Button 4.x after a while the Pictures goes black (sometimes one, sometimes both) and after a while the browser crashes.

Does anyone have a clue why?

Thanks - Michael

This is what the card look like when everything is good:

image

This is an example of the black whole:

02

And this is the code of the card:

type: custom:button-card
entity: sensor.movieurl
show_name: false
show_icon: false
show_state: false
custom_fields:
  picture_behind:
    card:
      type: custom:button-card
      entity: sensor.movieurl
      show_icon: false
      show_name: false
      style: |
        ha-card {
          box-shadow: none;
          background: none;
          height: 768px;
          border: none;
        }
  the_shadow:
    card:
      type: custom:button-card
      style: |
        ha-card {
          box-shadow: none;
          background: rgba(0,0,0,0.5);
          height: 768px;
          border: none;
        }
  picture: >-
    [[[return `<div><img src="${entity.state}"
    style="height:${entity.attributes.height}px;width:${entity.attributes.width}px;z-index:0;"></div>`]]]
  the_overlay:
    card:
      type: custom:button-card
      style: |
        ha-card {
          height: 150px;
          background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 100%);          
          border: none;
          border-radius: 0px;
        }
  the_2nd_overlay:
    card:
      type: custom:button-card
      style: |
        ha-card {
        background: none;
        border: none
        }
  title:
    card:
      type: custom:button-card
      name: '[[[return `${entity.attributes.title}`]]]'
      styles:
        name:
          - font-size: 40px
          - font-weight: 800
          - text-transform: uppercase
      style: |
        ha-card {
          box-shadow: none;
          background: none;
          height: 100px;
          border: none;
        }
  playheadBack: ''
  playhead: ''
  playhead2: ''
styles:
  card:
    - height: 768px
    - width: 1024px
    - margin: 0px
    - padding: 0px
    - border: none
    - box-shadow: none
  custom_fields:
    picture_behind:
      - z-index: 1
      - position: absolute
      - filter: blur(6px)
      - border: none
      - left: 0px
      - top: 0px
      - width: 1024px
      - margin: 0 0 0 0
      - padding: 0 0 0 0
      - background: '[[[return ` center url("${entity.state}")`]]]'
    the_shadow:
      - z-index: 1
      - border: none
      - position: absolute
      - left: 0px
      - top: 0px
      - width: 1024px
      - margin: '-10 -10 -10 -10'
      - padding: 0 0 0 0
    picture:
      - z-index: 2
      - position: absolute
      - border: none
      - left: 0px
      - top: 0px
      - width: 1024px
      - height: auto
      - padding: 0 0 0 0
      - margin-top: auto
      - margin-bottom: auto
    the_overlay:
      - z-index: 3
      - position: absolute
      - border: none
      - left: 0px
      - width: 1024px
      - bottom: '[[[return `${entity.attributes.differenz}px`]]]'
      - margin: 0 0 0 0
      - padding: 0 0 0 0
    the_2nd_overlay:
      - z-index: 4
      - position: absolute
      - background: rgba(0,0,0,0.9)
      - bottom: 0px
      - height: '[[[return `${entity.attributes.differenz}px`]]]'
      - border: none
      - width: 1024px
      - margin: 0 0 0 0
      - padding: 0 0 0 0
    title:
      - z-index: 5
      - position: absolute
      - border: none
      - left: 0px
      - bottom: 40px
      - width: 1024px
      - margin: 0 0 0 0
      - padding: 0 0 0 0
    playheadBack:
      - position: absolute
      - bottom: 20px
      - left: 50px
      - z-index: 10
      - width: 924px
      - height: 20px
      - background: rgba(255,255,255,0.1)
      - border-radius: 10px
    playhead:
      - position: absolute
      - bottom: 20px
      - left: 50px
      - z-index: 11
      - width: '[[[ return `${states[''sensor.playheadwidth''].state}px`]]]'
      - height: 20px
      - background: rgba(255,255,255,0.3)
      - border-radius: 10px 0px 0px 10px
    playhead2:
      - position: absolute
      - bottom: 20px
      - left: '[[[ return `calc(${states[''sensor.playheadwidth''].state}px + 50px`]]]'
      - z-index: 12
      - width: 3px
      - height: 20px
      - background: rgba(255,255,255,1)
      - border-radius: 0px