In firefox, when an element has a position and z-index, why change events do not fire on the tab?

Question

Look for any information on why the change event will fire without a position or z-index, and why it does not fire if these styles exist. This issue only occurs in Firefox .

Change event does not fire on tab

<select style="position: relative; z-index:1"><option>1</option><option>2</option></select>

Change event does not fire on tab

<select><option>1</option><option>2</option>

Change event sample code (using jQuery

$('select').on('change', function(e){ console.log(e.type) });

Refer to this CodePen for a working example.

Answer 1

It seems that this problem can be solved by setting a position before selectgetting focus, for example:

select { position: relative; }
select:focus { z-index: 1; }

, - , select :focus