Description:

When dynamically appending option elements to a dropdown using JavaScript, the options are not properly rendered in Chrome. This issue occurs even though the elements are successfully added to the DOM, and the styles width:920px are applied correctly to the select element.

The issue does not occur in Firefox, Safari, or on iOS.

Chrome Version:

Version 134.0.6998.89

Platform:

macOS 15.3.1

Screen resolution

1512 x 982

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Select option dynamic issue</title>
</head>

<body>
  <select style="width: 920px" id="test"></select>
  <button onclick="fillData()">Fill Options Data</button>
  <script>
    function fillData() {
      const selectEl = document.getElementById("test");
      if (selectEl) {
        selectEl.length = 0;
        for (let i = 0; i < 20; i++) {
          const optionEl = document.createElement("option");
          optionEl.innerText = i;
          selectEl.appendChild(optionEl);
        }
      }
    }
  </script>
</body>

</html>