Strange Background and CSS behavior on Apple devices of all types, not seemingly related to fix

[samedarkclouds]

Describe the bug Prior to update, everything looked the same, and correct on both Safari and Chrome. After the update, it appears that on Safari, the main bubble card header has a background artifact not affected by the CSS/Styles. IT seems to sit on top of the card below it and creates a box around the popup header area that discolors the contents below where it overlaps.

I included a picture of the exact same screen at the exact same time from both Safari and Chrome on the same Mac Studio. The Chrome version looks the same as it always did. The safari picture shows what I am talking about. Note: it appears correctly in the Companion app.

These screen shots were taken from a dashboard that was completely empty other than this one bubble card so as to prevent the possibility it was a trickle down from somewhere else.

Also, occasionally refreshing safari has weird and inconsistent effects the background, but never makes it look correct as it does in chrome.

Also, this effect existed before I did the "Pop-up initialization fix", and continues regardless. I was not experiencing the describe issue requiring the fix, but as it was mac related I added the fix to see if it had bearing. It doesn't seem to have made a difference.

To Reproduce Steps to reproduce the behavior: See code below with pictures.

Expected behavior I would expect the card to appear as it does on Chrome and not the way it appears on safari.

Screenshots Included below.

Desktop (please complete the following information):

• OS: Mac studio m1 Sonoma and confirmed on Windows 10 pro
• Browser: Chrome 121.0.6167.184 and safari 17.1.2

Smartphone (please complete the following information):

• Device: iPhone 14
• OS: 17.2.1
• Browser [e.g. Home Assistant Companion App, Safari]
• Version [e.g. 1.6.2]

Additional context type: vertical-stack cards:

• type: custom:bubble-card card_type: pop-up hash: '#great-room-lamps' bg_opacity: '10' bg_blur: '10' icon: mdi:wall-sconce-outline shadow_opacity: '10' name: Great Room Lamps
• square: false columns: 5 type: grid cards:
  • type: custom:button-card entity: switch.zw_glry_swt_n2_psz show_name: true name: Gallery Table icon: mdi:lamp-outline size: 25px lable: false styles: name:
    • font-size: 10px state:
      • value: 'on' color: '#f5de1bd1'
  • type: custom:button-card entity: switch.zw_sr_swt_e1_o1l_hsz show_name: true name: Sitting Room icon: mdi:lamps-outline size: 25px lable: false styles: name:
    • font-size: 10px state:
      • value: 'on' color: '#f5de1bd1'
  • type: custom:button-card entity: switch.zw_lr_swt_n_p1_psz show_name: true name: Couch Corner icon: mdi:floor-lamp-outline size: 25px lable: false styles: name:
    • font-size: 10px state:
      • value: 'on' color: '#f5de1bd1'
  • type: custom:button-card entity: switch.zw_lr_kp_e2_outx2_hkz show_name: true name: Living Room icon: mdi:lamps-outline size: 25px lable: false styles: name:
    • font-size: 10px state:
      • value: 'on' color: '#f5de1bd1'
  • type: custom:button-card entity: switch.zw_lr_swt_e2_poz_switch show_name: true name: Piano icon: mdi:lamp-outline size: 25px lable: false styles: name:
    • font-size: 10px state:
      • value: 'on' color: '#f5de1bd1'

Thank you! 🍻

[Clooos]

This is fixed in the v1.7.1, thanks for the feedback!

https://github.com/Clooos/Bubble-Card/releases/tag/v1.7.1

[Nemuritor01]

Great update. Works perfectly👍🏻

[Clooos]

Yeah! 🍻