Overflow and clear rules not honored together correctly

• Component: CSS
• Status: NEW ---

[John Haugeland]

One old trick for making tabs without border bottoms on the active tab, and also without involving tables, is to make your tabs as a series of inline elements inside a container, then to follow them with a gap element which is wider than the container, filled with non-breaking spaces.  

If the gap element and the last tab are clear:none, and the container is overflow:hidden, then the wide element should be cut off at the edge, providing a visually filled edge border ignorant of the widths of the tabs.  Unfortunately, WebKit ignores the clear:none, and wraps the long gap element, creating a very broken appearance.  All other major browsers (ff, ie, opera, icab) get this right.

Example code with screenshots of correct and incorrect rendering can be found here:

http://fullof.bs/outgoing/clipfail.html

[Ahmad Saleem]

I am able to reproduce a bug in Safari 15.6 by retrieving the test case from Wayback Archive and changing it into below JSFiddle:

Link - https://jsfiddle.net/dprufa3e/show

The bug is that (Tab1, Tab2, Tab3) does not have 'upper border' and it is same case for Chrome Canary 105 but Firefox Nightly 104 renders the above border perfectly fine.

It might be different bug compared to one originally mentioned in Comment 0 / Description but I am updating what I witnessed in the test case. I hope someone can add more details here. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/97457267>

[John Haugeland]

it's the same bug