search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.44k stars 39 forks source link

Popup goes dark when trying to open a dropdown inside it. #521

Closed fellipute closed 3 weeks ago

fellipute commented 1 month ago

Describe the bug
I use a vacuum card inside a popup, when I try to open the dropdown to select the vacuum speed the popup goes dark.

To Reproduce
Steps to reproduce the behavior:

  1. Create a popup
  2. Insert a card inside that has a dropdown
  3. Try to open the dropdown
  4. See error

Expected behavior
The popup shouldn't go dark.

Screenshots
image

image

https://github.com/Clooos/Bubble-Card/assets/3584098/afb8d272-e4ad-442f-bd34-2161acbd1542

Informations (please complete the following information):

Clooos commented 1 month ago

Damn, that's an interesting bug, I will take a look at that.

Clooos commented 1 month ago

I've just tested and I'm not able to reproduce this issue, but I've maybe fixed it by fixing some other issues.

So just wait for the next beta 🤞

Clooos commented 1 month ago

Hi, can you tell me if you still have this issue with the latest beta?

fellipute commented 1 month ago

Hi, can you tell me if you still have this issue with the latest beta?

Hi, same behaviour unfortunately :(

Clooos commented 1 month ago

I have tried with the exact same card inside a pop-up and I'm unable to reproduce this issue. I've tried on Chrome as well.

For now I'm clueless but something might be wrong with your pop-up setup.

fellipute commented 1 month ago

I have tried with the exact same card inside a pop-up and I'm unable to reproduce this issue. I've tried on Chrome as well.

For now I'm clueless but something might be wrong with your pop-up setup.

I just found out that something is adding a mask to the .bubble-popup-container css:

image

I'll try to find out which component is adding it, if the bubble card or the vacuum card.

btw, here's the full yml of the popup:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#aspirador'
    button_type: state
    entity: vacuum.roborock_s7
    show_attribute: true
    attribute: battery_level
    show_state: true
    show_last_changed: true
  - type: custom:xiaomi-vacuum-map-card
    map_source:
      camera: camera.roborock_s7_map
    calibration_source:
      camera: true
    entity: vacuum.roborock_s7
    vacuum_platform: humbertogontijo/homeassistant-roborock
    map_modes:
      - template: vacuum_clean_zone
      - template: vacuum_goto
      - template: vacuum_clean_segment
        predefined_selections:
          - id: '16'
            icon:
              name: mdi:broom
              x: 28625
              'y': 26175
            label:
              text: Lavanderia
              x: 28625
              'y': 26175
              offset_y: 35
            outline:
              - - 24800
                - 24050
              - - 32450
                - 24050
              - - 32450
                - 28300
              - - 24800
                - 28300
          - id: '17'
            icon:
              name: mdi:broom
              x: 25450
              'y': 33100
            label:
              text: Corredor
              x: 25450
              'y': 33100
              offset_y: 35
            outline:
              - - 24700
                - 29800
              - - 26200
                - 29800
              - - 26200
                - 36400
              - - 24700
                - 36400
          - id: '18'
            icon:
              name: mdi:broom
              x: 30750
              'y': 29325
            label:
              text: Cozinha
              x: 30750
              'y': 29325
              offset_y: 35
            outline:
              - - 29000
                - 27000
              - - 32500
                - 27000
              - - 32500
                - 31650
              - - 29000
                - 31650
          - id: '19'
            icon:
              name: mdi:broom
              x: 29375
              'y': 34200
            label:
              text: Sala
              x: 29375
              'y': 34200
              offset_y: 35
            outline:
              - - 26200
                - 28500
              - - 32550
                - 28500
              - - 32550
                - 39900
              - - 26200
                - 39900
          - id: '20'
            icon:
              name: mdi:broom
              x: 22600
              'y': 28275
            label:
              text: Suíte
              x: 22600
              'y': 28275
              offset_y: 35
            outline:
              - - 20500
                - 25050
              - - 24700
                - 25050
              - - 24700
                - 31500
              - - 20500
                - 31500
          - id: '21'
            icon:
              name: mdi:broom
              x: 26150
              'y': 29600
            label:
              text: Escritório
              x: 26150
              'y': 29600
              offset_y: 35
            outline:
              - - 24900
                - 27150
              - - 27400
                - 27150
              - - 27400
                - 32050
              - - 24900
                - 32050
          - id: '22'
            icon:
              name: mdi:broom
              x: 22625
              'y': 33525
            label:
              text: Biblioteca
              x: 22625
              'y': 33525
              offset_y: 35
            outline:
              - - 20450
                - 31950
              - - 24800
                - 31950
              - - 24800
                - 35100
              - - 20450
                - 35100
    map_locked: true
    two_finger_pan: false
  - type: custom:bubble-card
    card_type: separator
    name: Funções
    icon: mdi:cog
  - square: false
    type: grid
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: script.aspirador_ciclo_matinal
        name: Ciclo Matinal
        show_attribute: false
        attribute: friendly_name
        button_action:
          tap_action:
            action: none
      - type: custom:bubble-card
        card_type: button
        entity: script.aspirador_ciclo_noturno
        name: Ciclo Noturno
        show_attribute: false
        attribute: last_triggered
        show_last_changed: false
        show_state: false
        button_action:
          tap_action:
            action: none
      - type: custom:bubble-card
        card_type: button
        entity: input_boolean.aspirador_sujo
        show_attribute: true
        name: Aspirador Sujo
        attribute: last_triggered
    columns: 2
  - type: custom:mushroom-number-card
    entity: counter.aspirador_limpeza
    display_mode: buttons
    name: Ciclos de Limpeza
    layout: vertical
    secondary_info: none
fellipute commented 1 month ago

@Clooos found the mask in here:

https://github.com/Clooos/Bubble-Card/blob/94ad4073f61fda4bc2f734d2353e85bd46717f0f/src/cards/pop-up/styles.ts#L24

I just don't understand why it work in yours and in mine it gets black. Maybe the browser version or something like that?

Clooos commented 1 month ago

This is strange indeed, have you tried to remove the mask with a custom style?

Like this:

.bubble-pop-up-container {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
fellipute commented 1 month ago

This is strange indeed, have you tried to remove the mask with a custom style?

Like this:

.bubble-pop-up-container {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

For now this seems to work. Will use it on the popups that I have that has a dropdown. But that's very strange, i'll try to debug and check why that behaves oddly on my side.

Thanks! Should I close this issue now or we keep it open to track future similar problems?

Clooos commented 1 month ago

You can let this open for now, you are maybe not the only one, but indeed this is very strange.

Clooos commented 1 month ago

I've just released a new beta, I'm not sure but your issue is maybe fixed.

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12

fellipute commented 1 month ago

I've just released a new beta, I'm not sure but your issue is maybe fixed.

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.12

Just tried it, same behavior. I suspect its something on my side rather than the card itself. No idea what though, but I'll keep using the CSS to fix it.

What this beta fixed though is that the dropdown was showing outside the card in the previous betas, and now it's showing correctly in the right position!

Clooos commented 1 month ago

Nice, glad that you confirm this!

Clooos commented 1 month ago

I've removed that mask, someone on the HA forum had the same issue as yours.

I will release a new version soon!

Clooos commented 1 month ago

The new release is here, I haven't removed it but that should be fixed, can you confirm this?

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-rc.1

fellipute commented 1 month ago

The new release is here, I haven't removed it but that should be fixed, can you confirm this?

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-rc.1

Nope, still black :(

fellipute commented 1 month ago

Something broke on this last update btw:

image

cards are over each other.

Clooos commented 1 month ago

Damn... 😅

fellipute commented 1 month ago

max-height: 100% !important;

that's what's breaking lol

Clooos commented 1 month ago

Thank you! Indeed I will remove it! And I will do my best to fix that issue without removing the masks, I love them too much 😅

fellipute commented 1 month ago

Thank you! Indeed I will remove it! And I will do my best to fix that issue without removing the masks, I love them too much 😅

thanks! i'll rollback to beta12 for now

s1mpleman commented 3 weeks ago

This was fixed for me in v2