Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#13810 closed defect (fixed)

TabContainer: border sometimes disappears on browser zoom

Reported by: ffoure Owned by: bill
Priority: low Milestone: 1.8
Component: Dijit Version: 1.6.1
Keywords: TabContainer, border, z-index Cc:
Blocked By: Blocking:

Description

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.

Attachments (3)

TabContainer_border_bug.html (2.1 KB) - added by ffoure 8 years ago.
HTML to reproduce the issue
overflowVisible.gif (13.4 KB) - added by bill 8 years ago.
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
tabcontainerCss.patch (1.9 KB) - added by bill 8 years ago.
prospective patch but has problem shown in screenshot above

Download all attachments as: .zip

Change History (10)

Changed 8 years ago by ffoure

HTML to reproduce the issue

comment:1 Changed 8 years ago by bill

Summary: TabContainer border sometimes disappearsTabContainer: border sometimes disappears on browser zoom

comment:2 Changed 8 years ago by bill

Milestone: tbd1.8
Owner: set to 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.

comment:3 Changed 8 years ago by bill

See also #14164, may be the same bug.

Changed 8 years ago by bill

Attachment: overflowVisible.gif added

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

Changed 8 years ago by bill

Attachment: tabcontainerCss.patch added

prospective patch but has problem shown in screenshot above

comment:4 Changed 8 years ago by bill

Resolution: fixed
Status: newclosed

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.

comment:5 Changed 7 years ago by 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.

comment:6 Changed 7 years ago by 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.

comment:7 Changed 7 years ago by 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.

Note: See TracTickets for help on using tickets.