Curved tabs project, overflow issues
Curved tabs project, overflow issues
I've been playing around with a little CSS code for curved tabs recently, inspired by this style by MrOtherGuy.
It seems to work reasonbly well so far - still a work in progress - but one issue I just can't figure out - when the tabs are overflowing, the additional bottom corners I created for the outer tabs are cut off, unless they are the very first or last tab (which are taken care of).
I've tried every selector and element in this area, to change the cutoff/clipping points of these outer visible tabs in overflow, or the width/padding etc. of the scrollbox "window", but to no avail.
Any ideas would be much appreciated.
The code can be found here, a screenshot is attached showing the issue.
I hope the .svg code in the CSS file works, if not this is it:
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 32 32">
<path d="M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z" fill="context-fill"/>
<path d="M3 32.5 A16 16 0 0 0 15.5 16" fill="rgba(155,122,0,0)" stroke="context-stroke" stroke-width="1px"/>
<path d="M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z" fill="rgba(155,122,0,0)"/>
<path d="M15.5 16 A18.5 18 0 0 1 35.5 -0.5" fill="transparent" stroke="context-stroke" stroke-width="1" />
</svg>
You're viewing a single thread.
If I remember correctly that's like extremely frigging hard to do without making some other things much worse. With that style the outwards curve is "outside" of the tab. And the scrollbox logic only tracks the position of the tab itself so it ignores the size of the curve when it computes how much the scrollbox should be scrolled.
You can't just make the items outside of the boundary show up because, well that would show all tabs outside the visible section. And also that would prevent scrolling the box. But if you are interested it would go something along the lines of this:
#tabbrowser-arrowscrollbox[overflowing]{ --uc-scrollbox-overflow: clip; } scrollbox[orient="horizontal"]{ overflow: var(--uc-scrollbox-overflow,hidden); overflow-clip-margin: -10px; }I think that to solve this you have no other option than to make it such that the curve is all inside the actual tab boundary - which means you need to do something entirely different to style them.
Thanks very much for the reply; that's pretty much what I experienced; the additional tab corners basically would need to be inside the "physical" boundaries of the tab itself.
Which I found hard to do for some reason, but I'll give it another shot.I've cobbled together some sort of preliminary "solution" - but the proper term for that thing would probably be hacky. ;)