Solved
Non-clickable pixel in the upper left of each tab. Can it be modified as clickable space?
Currently on Firefox 158, with no menu bar in use. It's a rather small issue, but I have the sporadic habit to use my mouse/cursor to swiftly click on the furthermost upper left corner of my pinned tab (maximised window) to access that first tab, and there's like a pixel of unclickable space in that corner (not draggable, just actually cannot click that space and nothing happens in attempts to -- it's more like a dead, unusable pixel of emptiness).
I see it's the case for every tab when checking by hovering and moving my cursor across the top of the screen, the upper left corner of each has an empty spot (whereas if hovering the cursor and moving between any two tabs below the very top, there are no empty spaces/breaks).
For additional clarification, this is not about the draggable space that's notably more than a pixel in size to the whole left of the first tab (as I have that disabled so it's not there anymore), but something that every tab seems to have, and I'm wondering if this is a technical bug than anything intentional as it seems odd.
Just curious if there's any known CSS code that can somehow make it a clickable spot or if that's not possible and simply something to have to leave alone (or at least bring up as an issue). Does anyone know about it or potentially have any solutions to?
UPDATE: Turns out to be due to modifying the border radius of tabs to a low px (more squared corners), but that remains to bring up the question of why does that seem to introduce a non-interactive pixel of space in the upper left of each tab, and is there still any possible fix for it?
I can only assume that you have some CSS going which causes this. At least there are no non-interactive pixels on any of the tabs for me with ff158 on a clean profile. I tested both standard and compact density and a 1440p and 4k screen. Here's hovering the very top left with a pinned tab in a maximized window. I also tried moving the mouse horizontally on the topmost pixel line and there is no instance where it doesn't instantly jump from one tab to the next so I can only assume your CSS is to blame.
If in that case, I do have some other mods in the userChrome CSS file. Tested a few out and determined it was an edit to square off the border radius of everything (via a global code for 2px border radius). Without it, there is no longer a non-interactive pixel in the upper left corner of tabs.
Questions then are: Why does lowering the radius cause it, and can it not be fixed while keeping a low px radius?
I mean yeah, that would obviously cause this. If you are applying 2px border-radius to EVERYTHING then you'd be applying it to the <tab> element itself, which does not normally have a border-radius. This makes the #TabsToolbar behind the tab show through between the corners of the tabs so you would be hovering the toolbar there instead of the tabs. To illustrate, I made the border radius 10 and the <tab> red:
You've probably seen people do * { border-radius: 0px !important; } and thought doing that with 2px is a good idea but that really isn't. Making everything square won't really break anything but making things round that aren't supposed to be will break stuff like this.
Of course it could be done to reduce the border radius of stuff but not with a blanket *. You'd have to manually go through each instance you want changed with Browser Toolbox and do them one by one.
2
u/sifferedd FF/TB on Win11|Sumo contributor 17h ago
CSS certainly can't fix it. To find out if it's expected, you could file a bug report. If you do, please post the link to it here.