[BUG] graphical glitches on transparent areas of window

[dancaer69]

Checklist before submitting an issue

• [X] I have searched through the existing closed and open issues for eww and made sure this is not a duplicate
• [X] I have specifically verified that this bug is not a common user error
• [X] I am providing as much relevant information as I am able to in this bug report (Minimal config to reproduce the issue for example, if applicable)

Description of the bug

If I use border-radius on main window of eww, then the transparent areas at the corners have graphical glitches. Seems that the window reusing the buffer and not properly clearing it between redraws, so anything pass of those areas(mouse cursor, a window, a notification etc), keep appear on those areas and alternates with the screen's background image/color

Reproducing the issue

bar.yuck:

(defwindow bar
  :monitor 0
  :stacking "bottom"
  :windowtype "dock"
  :geometry (geometry :x "3"
                      :y "1"
                      :width "230px"
                      :height "1077px"
                      :anchor "top right")
  :reserve (struts :side "bottom" :distance "4%")
  (box	:orientation "v"
		:spacing 8
        :space-evenly "false"
        :valign "start"
        :halign "center"
        "test content"
        )
)  

style.scss:

.bar {
  background-color: #4B0082;
  border-radius: 70;
  opacity: 1
}

Expected behaviour

When use radius on main window to clear see the screen's background at the corners.

Additional context

I tested this on labwc which I use the last weeks, but also in wayfire and plasma, and I have the same issue in all.

[Nairou]

I'm seeing this behavior as well. I use the niri window manager (wayland), so it is common for windows to scroll underneath the main eww window. This results in leftover coloring being stuck at the corners where the border-radius transparency should show the background.

[fyasdani]

When dealing with the Wayland layer protocol, you should explicitly define the level of transparency of the background color: basically, define it using RGBA instead of RGB ie

rgba(255, 0, 0, 0.99) instead of #FF0000

Note: A high alpha level (0.99) is needed to enable transparency without making the widget itself appear transparent.