In Firefox on occasion, the first time a menu is shown on the page the menu container is laid out too large for its child menu items. This seems to be cache-related, as it only consistently happens after the page is loaded via Ctrl-F5 or the browser cache has been cleared/disabled. In addition, it appears to be a problem introduced in 4.1.x, as it is not reproducible on 4.0.7 and earlier.
Steps to reproduce the problem:
Create a button menu with a few simple menu items.
Open in Firefox, and reload the page using Ctrl-F5.
Click the button to open the menu.
The result that was expected:
The menu should be sized appropriately for the child menu items.
The result that occurs instead:
The menu is larger than expected for the child items. However, clicking the button to show the menu subsequent times shows the menu layout as expected.
The issue appears to be that the blank arrow image is not yet loaded by the time the first layout is run, causing the arrowEl to report a larger size than it actually occupies once the 1px by 1px blank image is loaded.
Hide or remove the arrowEl element from the DOM when it is not needed (i.e. when the menu item has no submenu). This override is one such solution, applying the "x-hidden" class to the arrow element when no submenu is specified:
Any idea what would be different? I'm just using the standard ext-all-debug.js and ext-all.css, so there's no custom code that would mess things up. I've tried running off the local filesystem and via webserver, with Firefox plugins disabled, and I still get this behavior.
Just tried against Firefox 14 and the latest Nightly, both with clean new profiles, and I'm seeing this happen in those versions as well. I only have access to Windows machines though, so I can't try to reproduce in Firefox for other platforms (Mac or Linux).