Background around rounded corners

[Thewolf2068]

Hi, so i have this weird issue where a background appears behind waybar after I for example move a window behind it or run wlogout.
How its supposed to look:

How it looks after i run wlogout:

(Sry for weird image resolutions)
I use hyprland-git on arch.
My config and css :
Config:

{
    "height": 30,
    "spacing": 4,
    "margin-top": 5,
    "margin-left":5,
    "margin-right":5,
    "margin-bottom":5,
    "reload_style_on_change": true,

    "layer": "top",
    "modules-left": ["custom/arch", "hyprland/workspaces",],
    "modules-center": ["custom/media"],
    "modules-right": ["tray", "pulseaudio", "clock", "custom/power"],

    "custom/media": {
        "format": "{icon} {text}",
        "return-type": "json",
        //"max-length": 50,
        "format-icons": {
            "spotify": "",
            "vlc": "󰕼",
            "mpv": "",
            "default": "🎜"
        },
        "escape": true,
        "on-click": "playerctl play-pause",
        //"exec": "$HOME/.config/waybar/mediaplayer.py > /dev/null" // Script in resources folder
        "exec": "/usr/bin/python3 $HOME/.config/waybar/scripts/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
    },

    "hyprland/workspaces": {
        "format": "{icon}",
        "on-click": "activate",
        "format-icons": {
            "active": "<span color='#ca9ee6'></span>",
            "default": "<span color='#eebebe'></span>"
        },
        "persistent-workspaces": {
                "*": 10
        }
    },


    "custom/power": {
        "format":"<span color='#179299'>⏻</span>",
        "on-click": "wlogout -b 4",
        "tooltip": false
    },
    "custom/arch": {
        "format": "<span size='large' color='#179299'>󰣇</span>",
        "on-click": "$HOME/.config/waybar/scripts/next_wallpaper.sh",
        "on-click-right": "$HOME/.config/waybar/scripts/prev_wallpaper.sh",
        "tooltip-format": "btw"
    },

    "tray": {
        "icon-size": 21,
        "spacing": 7,
        "show-passive-items": true
    },
    "pulseaudio": {
        "format": "{icon}",
        "tooltip-format": "{volume}%",
        "format-muted": "",
        "format-icons": {
            "default": ["", ""]
        },
        "on-click": "pavucontrol",
        "on-click-right": "pactl -- set-sink-volume 0 100%"
    },

    "clock": {
        "format-alt": "{:%a, %d. %b  %H:%M}",
        "on-click": " ",
        "tooltip": false
    }
}

Style.css:

@import "frappe.css";
* { all: initial; }
* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: "FiraCode Nerd", sans-serif, FontAwesome;
    font-size: 13px;
}

window {
    background-color: alpha(@base, 1);
    border: 2px solid alpha(@pink, 1);
    border-radius: 10px;


}
button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
    box-shadow: inset 0 -3px alpha(@teal, 1);
}

/* you can set a style on hover for any module like this */


#workspaces button {
    padding: 0 5px;
    background-color: transparent;
    color: #ffffff;
}



#workspaces button.focused {
    background-color: #64727D;
    box-shadow: inset 0 -3px #ffffff;
}

#workspaces button.urgent {
    box-shadow: inset 0 -3px #eb4d4b;
}

#mode {
    background-color: #64727D;
    box-shadow: inset 0 -3px #ffffff;
}

#custom-power,
#custom-arch
#clock,
#calendar,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#scratchpad,
#power-profiles-daemon,
#mpd {
    padding: 0 10px;
    color: #ffffff;
}

#window,
#workspaces {
    margin: 0 4px;
}

/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}



#battery {
    background-color: #ffffff;
    color: #000000;
}

#battery.charging, #battery.plugged {
    color: #ffffff;
    background-color: #26A65B;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: steps(12);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#power-profiles-daemon {
    padding-right: 15px;
}

#power-profiles-daemon.performance {
    background-color: #f53c3c;
    color: #ffffff;
}

#power-profiles-daemon.balanced {
    background-color: #2980b9;
    color: #ffffff;
}

#power-profiles-daemon.power-saver {
    background-color: #2ecc71;
    color: #000000;
}

label:focus {
    background-color: #000000;
}

#cpu {
    background-color: #2ecc71;
    color: #000000;
}

#memory {
    background-color: #9b59b6;
}

#disk {
    background-color: #964B00;
}

#backlight {
    background-color: #90b1b1;
}

#network {
    background-color: #2980b9;
}

#network.disconnected {
    background-color: #f53c3c;
}





#wireplumber {
    background-color: #fff0f5;
    color: #000000;
}

#wireplumber.muted {
    background-color: #f53c3c;
}

#custom-media {
    color: alpha(@pink, 1);
    min-width: 100px;
}

#temperature {
    background-color: #f0932b;
}

#temperature.critical {
    background-color: #eb4d4b;
}

#tray {
    color: alpha(@pink, 1);
    -gtk-icon-theme: "Papirus";

}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}

#idle_inhibitor {
    background-color: #2d3436;
}

#idle_inhibitor.activated {
    background-color: #ecf0f1;
    color: #2d3436;
}

#mpd {
    background-color: #66cc99;
    color: #2a5c45;
}

#mpd.disconnected {
    background-color: #f53c3c;
}

#mpd.stopped {
    background-color: #90b1b1;
}

#mpd.paused {
    background-color: #51a37a;
}

#language {
    background: #00b093;
    color: #740864;
    padding: 0 5px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state {
    background: #97e1ad;
    color: #000000;
    padding: 0 0px;
    margin: 0 5px;
    min-width: 16px;
}

#keyboard-state > label {
    padding: 0 5px;
}

#keyboard-state > label.locked {
    background: rgba(0, 0, 0, 0.2);
}

#scratchpad {
    background: rgba(0, 0, 0, 0.2);
}

#scratchpad.empty {
	background-color: transparent;
}

#privacy {
    padding: 0;
}

#privacy-item {
    padding: 0 5px;
    color: white;
}

#privacy-item.screenshare {
    background-color: #cf5700;
}

#privacy-item.audio-in {
    background-color: #1ca000;
}

#privacy-item.audio-out {
    background-color: #0069d4;
}

/* 
IMPORTANT STUFF 
IMPORTANT STUFF 
IMPORTANT STUFF 
IMPORTANT STUFF 
*/

#custom-power {
    margin-right: 10;
}
#custom-arch {
    margin-left:10;
}

#pulseaudio {
    color: alpha(@pink, 1);
    margin-right:10;
}

#clock {
    color: alpha(@pink, 1);
    margin-right:5;
}

#tray {
    color: alpha(@pink, 1);
    -gtk-icon-theme: "Papirus";

}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}

[drishal]

I'm facing a similar issue, plus something even weirder: when I close an app my border radius suddenly resets
for eg
this is how its supposed to look

and once I close an app this is how it looks

and if I try to take screenshot using grimshot:

EDIT: my dots:
hyprland config
https://gitlab.com/drishal/dotfiles/-/blob/master/config/hyprland/hyprland.org?ref_type=heads

waybar style.css
https://gitlab.com/drishal/dotfiles/-/blob/master/config/waybar/style.css?ref_type=heads

waybar config
https://gitlab.com/drishal/dotfiles/-/blob/master/NixOS/home-config/waybar.nix?ref_type=heads

[FarrenHawk]

@Thewolf2068 @drishal I'm not sure if this is helpful or not in your case, but for me, I found that adding the following lines to the end of my hyprland.conf fixed this issue:

layerrule = ignorealpha 0.1, waybar
layerrule = blur, waybar

My issue was specifically with blurring, which the second line fixes (it allowed my waybar to have a blurred transparent background. If you don't want blurring, it's probably unnecessary.

I'm no expert, but I think that the first line tells hyprland to look at the color values of waybar, and instead of interpreting alpha as black, it interprets as transparent and displays it as such. The number value allows you to tune it to your liking. 0.1 works best for me personally.

[Thewolf2068]

@Thewolf2068 @drishal I'm not sure if this is helpful or not in your case, but for me, I found that adding the following lines to the end of my hyprland.conf fixed this issue:

layerrule = ignorealpha 0.1, waybar
layerrule = blur, waybar

My issue was specifically with blurring, which the second line fixes (it allowed my waybar to have a blurred transparent background. If you don't want blurring, it's probably unnecessary.

I'm no expert, but I think that the first line tells hyprland to look at the color values of waybar, and instead of interpreting alpha as black, it interprets as transparent and displays it as such. The number value allows you to tune it to your liking. 0.1 works best for me personally.

Sadly that didn't change anything, the issue still persists :(. Thanks for the attempt though

[drishal]

@Thewolf2068 @drishal I'm not sure if this is helpful or not in your case, but for me, I found that adding the following lines to the end of my hyprland.conf fixed this issue:

layerrule = ignorealpha 0.1, waybar
layerrule = blur, waybar

My issue was specifically with blurring, which the second line fixes (it allowed my waybar to have a blurred transparent background. If you don't want blurring, it's probably unnecessary.
I'm no expert, but I think that the first line tells hyprland to look at the color values of waybar, and instead of interpreting alpha as black, it interprets as transparent and displays it as such. The number value allows you to tune it to your liking. 0.1 works best for me personally.

Sadly that didn't change anything, the issue still persists :(. Thanks for the attempt though

same here, didn't fix any of the issues here. I wonder tho if its a hyprland issue since I tried to use hyprpanel and a minimal ags/astal bar from their examples and have similar issue with the border

[ninetailedtori]

Yea, it's a hyprland issue. Layerrule blur is the cause, so till it's fixed it's probably better to disable any layerrule blur.