Fix Firefox bug where opacity filter breaks dropdown design elements

[maddiedierker]

This bug came to us through Zendesk -- in Firefox, dropdown design elements were automatically closing, so the user was unable to select an option from the dropdown.

Please don't ask me why the filter CSS property was causing this, because I can't figure that out. I haven't found anything online where folks are running into this issue. I only found it by commenting out every line of CSS until I found which one was the problem 🙃

There will be no user-facing change here (since the filter property was replaced with the opacity property), just the bug fix.

Links

• STAR-1080

Testing story

Manually tested on OS X in Firefox, and tested via a SauceLabs tunnel in Firefox/Win10. Also manually tested in Chrome and Safari to make sure this change didn't break dropdowns there.

Reviewer Checklist:

• Tests provide adequate coverage
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[jmkulwik]

(Note: This should not block this PR as this is a huge improvement for mac users) It looks like the issue still exists on Windows ☹️

[maddiedierker]

@jmkulwik i think you aren't seeing a difference because your local dist file doesn't have the relevant change. i had to update apps/build/package/css/applab.css manually (should be line 269) or run npm run build:dist from the apps/ directory to see the change.

i tested manually with a saucelabs tunnel in FF/Win10 and it was fixed, but if you could double-check, i'd appreciate it!

[jmkulwik]

i think you aren't seeing a difference because your local dist file doesn't have the relevant change

Manually building locally did it! Everything works as expected now!

[jmkulwik]

Awesome find!