#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)
Change History (10)
Changed 10 years ago by
Attachment: | TabContainer_border_bug.html added |
---|
comment:1 Changed 9 years ago by
Summary: | TabContainer border sometimes disappears → TabContainer: border sometimes disappears on browser zoom |
---|
comment:2 Changed 9 years ago by
Milestone: | tbd → 1.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.
Changed 9 years ago by
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 9 years ago by
Attachment: | tabcontainerCss.patch added |
---|
prospective patch but has problem shown in screenshot above
comment:5 Changed 8 years ago by
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.
HTML to reproduce the issue