material-web md-menu/md-select overlay positions itself too far to the left side of the anchor element

What is affected?

Component

Description

When using md-menu with positioning popover or document the overlay goes 10ish? pixels too far to the left side of the anchor.

The expected behavior would be for the overlay to be left? aligned with the anchor button.

This is also a problem in md-select, which is where I initially noticed the problem.

Reproduction

The problems are visible on the material-web.dev website already https://material-web.dev/components/menu/#popover-positioned-menus

https://material-web.dev/components/menu/#document-positioned-menus

And the select: https://material-web.dev/components/select/#usage

Workaround

I have not found a workaround.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.3.0

Browser/OS/Node environment

Browser: Version 122.0.6261.112 (Official Build) (64-bit) OS: Windows 11 Pro, version 23H2, build 22631.3155 Node version: v20.11.0 npm version: 9.6.7

Mar 09 '24 13:03 Pupix

In Firefox 123.0.1 (64bit) the menu behaves how it should, but the md-select is even worse. It opens the overlay in another country.

Mar 11 '24 15:03 Pupix

Further info: Applying menu-positioning="absolute" on md-select seems to fix the issue.

The problem may be with how position: fixed; works? Which doesn't always position itself relative to the the viewport, rather any ancestor with CSS transform applied will become a containing block for all descendants, as covered in the spec: https://www.w3.org/TR/css-transforms-1/

There may be other limitations at play here, but I am not aware of them.

Mar 11 '24 16:03 Pupix

Does this happen outside the catalog as well? If so, can you post a reproduction and the browsers it occurs on?

I wasn't able to reproduce in Chrome or Firefox on macOS at https://material-web.dev/components/select/stories/, so it may be an issue just with the inline demos.

Mar 11 '24 20:03 asyncLiz

Does this happen outside the catalog as well? If so, can you post a reproduction and the browsers it occurs on?

Yes, I randomly encountered the issue while working on an unrelated project.

I wasn't able to reproduce in Chrome or Firefox on macOS at https://material-web.dev/components/select/stories/, so it may be an issue just with the inline demos.

I can also confirm that the storyboard works properly.

In regards to the initial issues in Chrome 122.0.6261.112 (Official Build) (64-bit), here's is a repro . Same repro seems to work fine in Firefox 123.0.1 (64bit), so maybe there are 2 unrelated issues. Both tests have been done in Windows 11.

Trying to pinpoint the problem was a pain, however from what I've seen so far it happens only under certain conditions. Perhaps something to do with overflows and scrollbars during position calculations? Setting scrollbar-width: none; on the root <html> completely fixes the positioning problem in the repro and in my personal project.

Changing the height of .wrapper will yield different results, so if you don't instantly see it, try different values. If you can't reproduce the issue on your macOS then the width of the scrollbars may be the issue. From what I recall windows inlines them, pushing the content to the side, while macOS just overlays them on top of everything, not impacting the page's layout.

On my screen (Chrome 122.0.6261.112) it looks like this: height: 200px