Waybar Clips Overlapping Elements

[KineticAeon]

Waybar used to allow negative margins, allowing my status bar to look like this:

It now clips anything that overlaps with other elements, leading to this:

When the margin is halved (-16px to -8px), I get this:

left diagonal line css for first two images:

#l-tags-a0 {
   border-left: 16px solid transparent;
   border-bottom: 32px solid @color0;
   margin-left: -16px;
}

This works in the 0.10.2 release, but not 0.10.3 (v0.10.3-2-g2ead1bbf).

[ordy]

Something must be wrong with either your build or your config, because I'm running 0.10.3-1 from the arch package (which always pulls the latest release) and my negative margins work just fine.

Then I rebuilt my local version on latest commit, same thing:

[KineticAeon]

That is quite interesting. I've recompiled it from the AUR, this repo, and even used the binaries available from pacman, so I'm quite sure it's not my build. I've looked through my config as well and can't find anything wrong with it, though I am rather new at this. Would someone mind taking a look?
style.css: https://pastebin.com/k6cUnjju
defaultcolors.css: https://pastebin.com/EAcvWgJf
config: https://pastebin.com/99mRMP6Y
modules.json: https://pastebin.com/DJapSJp2

[KineticAeon]

I've a feeling it's related to grouping elements specifically because I get the below image when not making the tags groups, however applying the changes to all elements in the group using #l-tags > * { ... } does not seem to affect it.

[ordy]

Took me a moment to figure out your config, very hacky way to use empty groups as visual separators, don't think they were intended to be used as such 😅

Anyway, I ran your config and styles, at first I was getting your same issue, so I included reload_style_on_change to the config and tried to figure out what was going on.

Now here is the weird part. After setting this:

#r-logo, #l-tags-a2, #r-tags-a2, #l-tags-a3, #r-tags-a3, #r-tags-a4, #l-tags-a4, #l-tray {
   background: transparent;
   margin: 0px;
}

And loading waybar, there transparent "separators" were still there, BUT changing the margin value to 10px (which would reload the config), then changing it back to 0px would fix the issue and actually make it look like in your first screenshot.

However, after like 30 seconds, the "separators" around your pulseaudio module would turn back to transparent 🤷

Why or what is going on here? To be honest, I have no idea. Would have to test on older versions to see what introduced that behavior.

Edit:

using #l-tags > * { ... } does not seem to affect it.

Because #l-tags isn't a valid selector? Can't use partial names on css and expect it to apply to all matching id's.

[KineticAeon]

Ah, for that last part I did specify all the tags in the config, I just wrote it that way on here because there’s a lot of them. That’s interesting though, I’ll try and find out what happens when I do the same thing you did in a few different scenarios and see what exactly makes them change. I will agree is quite a hacky way to do it, I kinda just stumbled my way around making it until it looked right.

[KineticAeon]

After a long bout of experimentation, I have to be honest I have no idea what's going on here. The behaviour doesn't seem to be consistent at all on 0.10.3, and I've lost motivation to diagnose this issue. Instead I've just swapped the separators for gradient boxes. I'm not sure if this even counts as a bug or if it should be closed. Should it be?