TabContainer: border sometimes disappears on browser zoom

[ffoure]

Browser: FF 3.6.21 (not that it matters for this issue)

I ran into an issue with a simple dijit.layout.TabContainer? using left tabs (tabPosition=''left-h''). Sometimes when changing the size using [Ctrl][+] / [Ctrl][-] in FF to zoom in and out, the right border of the Tabs DIV disappears.

The TabContainer? DIV has two children DIVs. One for the "Tabs" and one for the "Container". Note that when using left tabs, the left visible border is actually the right border of the Tabs DIV and not the left border of the Container DIV.

In some rare cases, the Container DIV was overlapping by 1px over the Tabs DIV. As a result, the right-most pixel of the Tabs DIV (which includes its 1px right border) is no longer visible.

The root of the problem is that all browser engines need to convert floating point precision pixels (e.g., 145.583) into an exact location when rendered on the screen. How this is done varies by browser and version. I came across the following links which explain this in more detail:
​http://ejohn.org/blog/sub-pixel-problems-in-css/
​http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html

The way I fixed this problem was to assign the Tabs DIV a z-index of 1:
.dijitTabContainerLeft-tabs { z-index: 1; }

For some reason, setting the ".dijitTabContainerLeft-container" style with a z-index of -1 didn't work when I did it in the style section of the HTML (it showed up as 0 rather than -1 in Fire Bug), but *did* work if I changed it to -1 in Fire Bug.

[ffoure]

HTML to reproduce the issue

[bill]

See #4560 for issues with font-size adjustments, which are much more severe than this issue. I'll try to add your suggested CSS for 1.8.

[bill]

See also #14164, may be the same bug.

[bill]

showing problem when we set overflow:visible and z-index:1 on various nodes; notice how the "Inline TabContainer?" tab's top border extends too far to the right, over the scroll-right and menu buttons

[bill]

prospective patch but has problem shown in screenshot above

[bill]

In [27031]:

CSS updates so TabContainer borders don't get hidden if there are off by one pixel placement errors.

It's complicated because we need to clip on the x-axis so there's no overflow due to the 50K width tab-strip... but avoiding cutting off borders by clipping on the y-axis. And browsers are still very quirky with the overflow-x / overflow-y combinations they support, see ​http://www.brunildo.org/test/Overflowxy2.html.

Also setting z-index: 0 on top level nodes of widgets that set z-index on internal nodes, to start a new stacking context. This avoids some rare behavior bugs if the application has other z-index:1 nodes outside of the layout widgets.

Fixes #13810, #14164. If additional changes are needed I'll just reference #14164.

[bill]

Browser: FF 3.6.21 (not that it matters for this issue)

I don't reproduce this problem anymore, even after removing the overflow-y: visible setting from [27031]. Probably it reproduces on the desupported FF3.6, but not on the latest FF release, FF18. Since it's causing problems on IE10 (see #16675), I'm going to remove it.

[bill]

In [30547]:

Make TabContainer overflow:visible rather than overflow-y:visible in 1.8 branch. It was already changed in trunk in [30152]. According to [27031] there was some browser where this caused problems with the sliding TabController, but I'm not seeing any issues. Fixes #16675 on 1.8 branch (it's already fixed on trunk), !strict. Also refs #13810, #14164.

[bill]

In [30549]:

Make TabContainer? overflow:visible rather than overflow-y:visible in 1.7 branch. It was already changed in trunk in [30152]. According to [27031] there was some browser where this caused problems with the sliding TabController?, but I'm not seeing any issues. Fixes #16675 on 1.8 branch (it's already fixed on trunk), !strict. Also refs #13810, #14164.