Open Bug 2062910 Opened 5 days ago Updated 5 days ago

Native <select> dropdown flickers and duplicates on Android when DOM updates during interaction

Categories

(Firefox for Android :: General, defect)

Firefox 153
defect

Tracking

()

UNCONFIRMED

People

(Reporter: eryomin.t, Unassigned)

Details

Attachments

(1 file)

Attached video Record.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0
Firefox for Android

Steps to reproduce:

Build: 153.0.3 (Build #2016176519), 5ea6f25c57d411c3dea06f0405775b4066302e09
GV: 153.0.3-20260803132010
AS: 153.0
OS: Android 14

  1. Open any HTML page with a <select> element that has dynamically rendered options.
  2. Click the <select> to open the native dropdown menu.
  3. While the menu is open, trigger a DOM update that re-renders the <option> elements (for example, using setInterval or any reactive framework like Vue.js).
  4. Observe the dropdown behavior.

Minimal test case:

<select>
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>
<script>
  const option = document.querySelector('option');
  const value = option.value;
  setInterval(() => {
    option.setAttribute('value', value);
  }, 1000);
</script>


Actual results:

The dropdown menu flickers, flashes, or creates duplicated/overlapping lists. In some cases, the menu becomes completely unusable and the options appear to "duplicate" on top of each other. This creates a visual glitch that makes it impossible to select an option.


Expected results:

The dropdown menu should remain stable, smooth, and fully functional while the DOM updates in the background. Updating the DOM should not cause any visual flickering, duplication, or interference with the native dropdown menu.

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, but is not confident enough to move the bug to that component.

Component: Untriaged → General
Product: Firefox → Firefox for Android

Just to add: the same issue is also observable on desktop Firefox, though it's less severe.
When the select menu is open and DOM updates occur, the hover/selected state resets to the first option,
causing a brief flicker. The mobile version is more affected with overlapping/duplicating menus,
but the underlying behavior appears to be the same.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: