Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Background image does not respect rounded corners #31

Closed
laszlojakab opened this issue Dec 23, 2022 · 8 comments
Closed

[Bug]: Background image does not respect rounded corners #31

laszlojakab opened this issue Dec 23, 2022 · 8 comments
Assignees
Labels
bug Something isn't working

Comments

@laszlojakab
Copy link

What happened?

If you set a background image the card does not respect the rounded corners, see image below:

image

I think the design should be the same with or without background image.

Card Version

1.1.2

HomeAssistant Version

2022.12.8

Relevant javascript log output

No response

@laszlojakab laszlojakab added the bug Something isn't working label Dec 23, 2022
@laszlojakab
Copy link
Author

As I see an overflow: hidden shoud be added to ha-card element to solve the problem.

@junalmeida
Copy link
Owner

That's interesting because this does not happen here:
image

I wonder if you may be using an outdated version or a not common browser?

@laszlojakab
Copy link
Author

I have prepared an other example:

image

The code to reproduce:

type: vertical-stack
cards:
- type: custom:minimalistic-area-card
  title: Room with background
  area: working_room
  image: >-
    https://www.thespruce.com/thmb/kNPU_doz6IvtUXrtV1GnzI85BXs=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/living-room-ideas-5194639-hero-a99a77f61b9b4e368c62ca603ab45322.jpg
  entities:
    - light.dining_room_led_light
    - sensor.dining_room_temperature
- type: custom:minimalistic-area-card
  title: Room without background
  area: working_room
  entities:
    - light.dining_room_led_light
    - sensor.dining_room_temperature

I'm using Chrome 108.0.5359.125 (64 bites) (cohort: Stable) from Windows 10. But from Android phone it looks like the same:

image

@junalmeida
Copy link
Owner

Do you have any theme or "custom-ui" customizations in place?
My android app also works:

image

If you could try inspect the img in the card that will give us a clue of what might be happening:
image

@laszlojakab
Copy link
Author

laszlojakab commented Dec 29, 2022

I've disabled all my 3rd party javascript integrations and no themes are used and looks the same. The problem could be related to --ha-card-border-radius css variable because as I see it is empty for me:

image

Do you know where should it be defined?

@laszlojakab
Copy link
Author

The ha-card style defines border radius as 12px (but only as fallback value):

image

@junalmeida
Copy link
Owner

Ok, thanks for digging it out

@laszlojakab
Copy link
Author

It is working now in 1.1.8. Thanks for the fix:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants