Forms: Select dropdown arrow initial loads in wrong place

[edanzer]

Impacted plugin

Jetpack

Quick summary

If you add a dropdown field to a Jetpack Form, and then load it on the frontend, the arrow icon for the drop down initially loads in the wrong place (in the lower left corner of the field). It then corrects after a few seconds. We generate some dynamic CSS in this file. Once that CSS is generated and applied, the field loads correctly.

Although the issue resolves, it takes a long time and it's ugly in the mean time. Ideally we can add some fallback styling to ensure this is styled correctly from the start.

Steps to reproduce

1. Add a Jetpack form block with a select drop down.
2. Go to frontend and look at select dropdown immediately upon page load.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No response

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

No response

[coder-karen]

Related: #38470 (that one got auto-closed due to a related PR which was only a partial fix - there were some themes that displayed the arrows permanently in the wrong location).