550697 - CSS Cascading submenu truncated on hover

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[David Hall]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)

I have a set of CSS-defined menus that popup on hover.  Then there is a second level submenu, it does not fully display.  On the sample page, hover over the Music menu on the left panel, and then hover over the Recorded music item.  A second menu should expand to the right with multiple options.  This feature  works correctly in all previous version of Firefox (including 3.5.8), and also in Chrome and IE.  

Reproducible: Always

Steps to Reproduce:
1. open http://rhccucc.org
2. hover over the Music menu item on left panel
3. then hover over the Recorded Music item in the exposed menu
Actual Results:  
Only the portion of the next submenu that fits within the confines of the first menu box will display.

Expected Results:  
A menu box should appear with about 9 drop down items

Comment 1

[David Hall]

Attachment: Screenshot of problem and "should be"

This gif attachment shows a screenshot of the incorrect display, as well as a correct display (the latter using Chrome)

Comment 2

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

"clip:rect(auto, auto, auto, auto)" doesn't mean what you assume it means. It means to clip everything inside the border---which Mozilla does. [1]

The reason it works in Chrome (and Opera) is that you don't give it the incorrect code:

 ref.style.clip = (counter==100 ?
  ((window.opera || navigator.userAgent.indexOf('KHTML') > -1) ? '':
   'rect(auto, auto, auto, auto)') :
    'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');

(lines 85--88). If given the same code you feed to Gecko, Chrome and Opera clip everything inside the border as well. The solution is to change your code to:

 ref.style.clip = (counter==100 ?
  'auto' :
  'rect(0, ' + ref.offsetWidth + 'px, '+(ref.offsetHeight*cP)+'px, 0)');

[1] http://www.w3.org/TR/CSS21/visufx.html#value-def-shape
"The value 'auto' means that a given edge of the clipping region will be the same as the edge of the element's generated border box [...] such that four 'auto' values result in the clipping region being the same as the element's border box)."