[mdc-select] Outline has noticible width step

[pogorv12]

Bug report

Outlined type of select has noticeble outline width step around the element.

Steps to reproduce

Go to https://material-components.github.io/material-components-web-catalog/#/component/select Screenshot above is taken from this link. I can see the step on my Sony Xperia 5II and Lenovo ThinkPad. While it is not really visible on my external HP screen.

Actual behavior

It looks like border-color or border-width style issue near the .mdc-notched-outline__notch styled element makes the visible outline width step for select element.

Expected behavior

Outline width expected to be visibly the same all around the element.

Screenshots

Your Environment:

Sony Xperia 5II and Lenovo ThinkPad, chrome and edge browsers of current versions.

Possible solution

Adjust styles

[DouglasRiddle]

I notice the same when the zoom level within the browser grows beyond 100% 100%

140%

[brandondiamond]

Thanks for this report! I've looped in Liz who is most familiar with these styles.