[GH-ISSUE #56] Visual Glitch: Rectangular borders/shadows appearing behind rounded cards #47

New issue

Open

opened 2026-05-07 00:17:54 +02:00 by BreizhHardware · 1 comment

BreizhHardware commented

2026-05-07 00:17:54 +02:00

Owner

Originally created by @joelg12345 on GitHub (Apr 10, 2026).
Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/56

Visual Glitch: Rectangular background artifacts behind rounded cards and separators

Describe the bug
A visual regression is occurring again after updating past v3.0.0+ where rounded elements (cards and custom:bubble-card separators) are displaying a faint, sharp-edged rectangular background or shadow underneath the rounded glass effect. This ruins the "glassmorphism" aesthetic as the square container corners bleed out from behind the rounded corners of the element.

To Reproduce
Steps to reproduce the behavior:

Apply the homeassistant-visionos-theme.
Use a custom:bubble-card with type separator or standard dashboard cards.
Observe the rectangular artifacts behind the rounded "pill" or card shapes, especially visible against blurred backgrounds.

Expected behavior
Only the rounded pill/card should be visible. There should be no rectangular container or shadow rendering behind the rounded corners.

Screenshots
Primary issue on Room Cards:
[Insert Image 1]

Issue persisting on Bubble Card Separators (Studio, Living Room, etc.):
[Insert Image 2]

Environment:

Frontend Version: 20260325.6
Core Version: 2026.4.1
Relevant Cards: custom:bubble-card, horizontal-stack, grid (and potentially others)
Card-mod installed: Yes (Note: I am using card-mod and am unsure if the conflict originates there or within the theme's base CSS).

Additional context
The issue is particularly prominent on the Bubble Card separators. It appears the theme might be applying a background-color or box-shadow to a high-level ha-card or container div without an accompanying overflow: hidden or matching border-radius, causing the "square" background to leak out.

Originally created by @joelg12345 on GitHub (Apr 10, 2026). Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/56 ### **Visual Glitch: Rectangular background artifacts behind rounded cards and separators** **Describe the bug** A visual regression is occurring again after updating past **v3.0.0+** where rounded elements (cards and `custom:bubble-card` separators) are displaying a faint, sharp-edged rectangular background or shadow underneath the rounded glass effect. This ruins the "glassmorphism" aesthetic as the square container corners bleed out from behind the rounded corners of the element. **To Reproduce** Steps to reproduce the behavior: 1. Apply the `homeassistant-visionos-theme`. 2. Use a `custom:bubble-card` with type `separator` or standard dashboard cards. 3. Observe the rectangular artifacts behind the rounded "pill" or card shapes, especially visible against blurred backgrounds. **Expected behavior** Only the rounded pill/card should be visible. There should be no rectangular container or shadow rendering behind the rounded corners. **Screenshots** **Primary issue on Room Cards:** [Insert Image 1] <img width="1024" height="508" alt="Image" src="https://github.com/user-attachments/assets/c4c4e951-cf31-402d-a5db-d4e400cc4a6b" /> **Issue persisting on Bubble Card Separators (Studio, Living Room, etc.):** [Insert Image 2] <img width="518" height="613" alt="Image" src="https://github.com/user-attachments/assets/1efe5723-fcef-4ec1-8b55-d70e36c8e170" /> **Environment:** * **Frontend Version:** 20260325.6 * **Core Version:** 2026.4.1 * **Relevant Cards:** `custom:bubble-card`, `horizontal-stack`, `grid` (and potentially others) * **Card-mod installed:** Yes (Note: I am using card-mod and am unsure if the conflict originates there or within the theme's base CSS). **Additional context** The issue is particularly prominent on the Bubble Card separators. It appears the theme might be applying a `background-color` or `box-shadow` to a high-level `ha-card` or container div without an accompanying `overflow: hidden` or matching `border-radius`, causing the "square" background to leak out.

BreizhHardware added the

third party

label

2026-05-07 00:17:54 +02:00

BreizhHardware commented

2026-05-07 00:17:54 +02:00

Author

Owner

@Nezz commented on GitHub (Apr 12, 2026):

Hi! I don't use bubble-card, but if you can come up with a card-mod fix to remove the second border/shadow I can add that to the theme.

@Nezz commented on GitHub (Apr 12, 2026): Hi! I don't use `bubble-card`, but if you can come up with a `card-mod` fix to remove the second border/shadow I can add that to the theme.