Overflow menu alignment issue in Firefox

[reportingissue18]

Detailed description

The overflow menu is not aligned horizontally with the button on Firefox. The issue can be seen on the "Vanilla JS" example displayed on http://carbondesignsystem.com/components/overflow-menu/code, and https://codepen.io/anon/pen/WyxMVb

Sometimes it appears to display with correct alignment, but if the user zooms in/out the menu becomes misaligned.

Reproduced on Firefox 60.0.1 and 52.8.0

The react version of the overflow menu does not seem to have this issue, though it appears to have a different implementation. Instead of using left/right dynamic positioning and being appended to the body, as is the case with the Vanilla JS version, it looks like it does not use dynamic positioning and is appended to the same div that contains the svg icon.

Is this issue related to a specific component?

Overflow menu

What did you expect to happen? What happened instead? What would you like to see changed?

Expect the overflow menu arrow to be aligned directly under the button/svg.

What browser are you working in?

Firefox 60.0.1 and 52.8.0

What version of the Carbon Design System are you using?

Our app is using 8.19.5 ... The example above is using 9.0.2
Both look to have the issue.

Any pressing ship or release dates we should be aware of?

Application has first major release in two weeks, the overflow menu is used throughout.

Additional information

[asudoh]

Couldn’t reproduce the issue, either in 60.x or 52.x ESR. Neither in the Carbon site or in our CodePen example.

Here are some additional information which may help; Overflow menu code has objMenuOffset option (e.g. OverflowMenu.create(theDOMElement, { objMenuOffset:{ top: 100, left: 100 } })) that allows you to adjust the menu position. The default value of that option is a function that returns a position adjustment, and debugging the function may give you a hint wrt how you can make an adjustment. Also, after overflow menu opens, the menu body gets a style attribute what determines the position relative to the top-left corner of the viewport, and you may want to see if such value is desired for your environment or not. Hope this helps.

[reportingissue18]

I was able to reproduce the issue on another machine. Sometimes it would show on page load. Other times it would show on zoom in/out.

We needed to implement a version of overflow menu that gets added to a specific dom element instead of to body.

[asudoh]

We needed to implement a version of overflow menu that gets added to a specific dom element instead of to body.

Thank you for explaining more - Wondering if above is what this issue is all about (we should change the title if it’s the case), or it’s a separate issue. If it’s the latter, could you please create a reduced case e.g. in CodePen? Thanks!

[tw15egan]

Seems like this was addressed in #911 (comment) and #961

Feel free to reopen if you feel this is still an issue