Pagination Select component is unreadable under Edge Mac/Window & Chrome/Windows with Gray 90 & 100 themes

[obambrough]

What package(s) are you using?

• carbon-components

Detailed description

With Gray 90 or Gray 100 themes the Select dropdown menu within the Pagination component is not readable with Edge (both Mac and Windows.) The same issue is also present with Chrome on Windows (but not Mac.) The issue is not present with Firefox for either Mac or Windows.

When the dropdown menu is shown (hover over the number of items selection and click on it) the menu become visible and is readable. If you move the mouse cursor down over the menu or off of the pagination component the menu changes its background to a white color causing the options to not be readable.

Steps to reproduce the issue (with Edge browser under Mac or Windows)

1. Navigate to the Carbon pagination component demo: https://www.carbondesignsystem.com/components/pagination/usage/
2. Change theme to either Gray 90 or Gray 100
3. From the pagination component open the 'Items per page' drop down with the mouse
4. Move the mouse cursor either down over the menu or off of the pagination component - the menu's background changes color. For Chrome on Windows the cursor must be moved off the pagination component for the background to change.

Additional information

This issue is related to issue #9112 and PR #9346. PR 9346 reverted the change made to fix issue 9112. I believe a slight variation of fix to eliminate the background-color: transparent style definition may be better solution than setting the color to $ui-background (which was the reverted change.) I don't know under what circumstances the background-color: transparent styling is needed.

This video demonstrates the issue.

pagination-select-issue.mov

[tw15egan]

Thanks for reporting! The revert was necessary as it threw off the styling for the Pagination component in all browsers. More investigation is needed for a fix and you can track it over in #9112. Going to close this as a duplicate, feel free to add any comments to #9112