Menu: obscured by Firefox's scrollbar on Macs

[guest]

If I open a !PopupMenu2 and it happens to overlap an element with a scrollbar, the scrollbar incorrectly gets rendered on top of the !PopupMenu2. This happens in Firefox running on Macs only.

Workaround is to include this CSS:

.dojoPopupMenu2 > tbody {overflow: auto}

[guest]

The fix I proposed above seems to cause problems with Firefox's "outline" CSS if the last MenuItem? in the PopupMenu? is focused. The "outline" CSS seems to increase the size of the MenuItem? by a little which causes the overflow to exhibit a scrollbar temporarily. My workaround for that in my app is just to hide the "outline" with "{outline:0}" but I suppose that will have a11y concerns inside Dojo. Just a heads up.

[bill]

Hmm, interesting workaround. How about if you always show an outline (whether focused or not) but when not focused the outline is transparent?

Actually I don't understand how this could happen. I thought that outlines didn't take up any space: ​http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines.

[guest]

Replying to bill:

Actually I don't understand how this could happen. I thought that outlines didn't take up any space: ​http://www.w3.org/TR/REC-CSS2/ui.html#dynamic-outlines.

That's what I thought too. But I was pushed to get something out the door so I didn't have time to investigate further. But losing the outline did stop the overflow.

[bill]

Hmm, I tried adding

.dj_gecko .dijitMenu > tbody {overflow: auto; }
.dj_gecko .dijitMenuItemLabel { outline: 0; }

but in addition to the a11y question about not displaying the dotted border (which I think is OK since the selected node is highlighted and the colors are inverted), the border of the table itself gets cutoff on the bottom and right.

And if I make the border big then scrollbars show up (even though I've set overflow:visible). Very strange.

[bill]

OK, this works in FF3, so I don't want to spend time working around it in FF2.