Why is Firefox 83 adding visibly noticeable padding by default to options in a multiple select option list?

Question

I just upgraded my install of Firefox to version 83 on macOS Big Sur (11.0.1) and noticed something odd this morning while workin on code for a client’s site: It seems that as of version 83, Firefox is now adding 2 pixels of padding to the top and bottom of <select> list <option> items in multiple select item list.

I was able to test and duplicate the issue by creating this very simple HTML form:

<form>
  <select name="numbers[]" form="this_form" autocomplete="on" size="4" multiple>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    <option value="Six">Six</option>
    <option value="Seven">Seven</option>
  </select>
</form>

And loaded it purely as a file (drag and drop) into Firefox 83 and Safari 14.0.1. Screenshots below with inspectors loaded to confirm what I am seeing.

Is this a bug, a feature or something else? I was able to neutralize this issue on the client website by setting this CSS value in the site’s CSS file:

select option {
  padding: 0;
}

I understand that Firefox allows setting such CSS as confirmed in this 2013 post on Stack Overflow:

“The restriction depends browser to browser, like padding and even margin of option tag works in the Mozilla Firefox while it doesn't work with Chrome.”

But it ultimately baffles me as to why there is now a default padding: 2px 4px 2px 4px setting for <select> list <option> items in Firefox 83?

---

Firefox 83 <select> list <option> padding:

---

Safari 14.0.1 <select> list <option> padding:

Answer 1

I think this was changed by https://bugzilla.mozilla.org/show_bug.cgi?id=1656004.

Mozilla are redesigning Firefox's form controls and this was part of the change, but Firefox used to have 3px 5px instead in the horizontal axis, which is the same amount of padding. In the vertical axis it added 2px of padding around the options indeed.

But this you can change with CSS yourself if you want, it's just the default UI styles that changed.