Double lines near some components

[iamkroot]

First, thanks a lot for the effort! This is a really cool theme, didn't know FF was so customizable.

Coming to the issue, as you can see in the attached image, I'm seeing some misplaced lines near some of the components.

1. Near the right bottom corner of the active tab, there is a vertical line and a rounded line. I've verified that any external FF themes have been disabled, so not sure why this is happening.
2. The left bottom rounded corner is also slightly out of sync with the horizontal line from the previous tab. The width of the horizontal line seems to be 2px due to anti-aliasing, but the rounded corner is exactly 1px, leading to a discrepancy.
3. Below the window buttons, I'm seeing two slightly displaced non-overlapping horizontal lines. Same issue happens below the URL bar (not included in pic).

I suspect points 2 and 3 might be due to X11 scaling (I have a scale factor of 1.25x), but not sure.

[PROxZIMA]

I suspect that's a scaling issue. A friend of mine ran into a similar, I'd say exactly this, UI glitch but it was on windows. Is your screen resolution 1366x768?

For both 1 and 2 -> The bottom corners are difficult to position as they are two different elements floating around the tabs. Slight scaling and they'll be out of sync.

3 -> Can you provide your firefox version? Firefox version 108.0 has a 1px margin which I fixed already. So I need to crosscheck it again.

[iamkroot]

Is your screen resolution 1366x768?

Nope, it is 1920x1080.

Can you provide your firefox version?

I'm on the Dev Edition 109.0b6

[PROxZIMA]

I have a scale factor of 1.25x

Does scaling to 1x gives the same result as above? As the radius and width are in px, scaling will result in some distortion. Even the SVG window controls looks pixelated.

I'm planning to use relative units like rem and em. They'll most likely solve the scaling issue.

[iamkroot]

Does scaling to 1x gives the same result as above?

All artifacts are gone on 1x scale. So yes it is indeed a scaling issue.

I'm planning to use relative units like rem and em. They'll most likely solve the scaling issue.

That would be great!

[iamkroot]

Can confirm, switching to rem at two places in userChrome.css fixed most of the issues.

  --tab-radius: 0.5rem;
  --tab-border-width: 0.125rem;

I'm guessing some other px values are still causing a conflict:

1. Bottom left corner is abruptly cut off. I'm guess this is because of urlbar underline not respecting the radius.
2. Some artifacts on the right vertical line of the open tab. Is the next tab's invisible border causing a conflict?

[iamkroot]

Was able to fix the bottom-left corner issue by adding this line:

.tabbrowser-tab:first-of-type[visuallyselected] {
  margin-left: var(--tab-radius) !important;
}

Seems that the following lines in tabbar.css are meant to do the same thing already- https://github.com/PROxZIMA/Sweet-Pop/blob/1941ecd260b19b326a0c6128d8c0308405d5db68/css/tabbar.css#L142-L149

But first-visible-tab attribute is simply not present on the elements, so the rules aren't applied.

[iamkroot]

Re: point 2 (right vertical line getting clipped), it seems the rules related to .tabbrowser-tab[visuallyselected] .tab-stack::after are affecting this (especially the clip-path), but even after converting the units to rem, it wasn't fixed. Not sure what to do about it.

@PROxZIMA would you be willing to accept a PR for the rem changes I've made? Doesn't cover everything, but it is at least some improvement over current.

[PROxZIMA]

But first-visible-tab attribute is simply not present on the elements, so the rules aren't applied.

first-visible-tab is applied to the first tab and I tested it on PopOS, Arch, Windows and Mac. As it is an attribute chances of it being applied to the first tab ain't 100%. So :first-of-type seems a good choices. Also :last-of-type for the last tab.

@PROxZIMA would you be willing to accept a PR for the rem changes I've made? Doesn't cover everything, but it is at least some improvement over current.

That will be great. That same PR will be used to fix all the scaling related issue. I'll test it on other platforms too.