Multi-step form CSS broken by focus()

Reproduceable at https://demo.givewp.com/multi-step-form/

If using a mobile device browser responsive to focus(), (eg. Edge / Chrome on Android), the third panel of the multi-step form (give-section payment) loads its content partially outside-left of the iframe border. It appears to be because the autofocus (cursor) that loads in the “First Name” textbox is being taken as the relative position of the element as it slides into the viewport. The off-centred final position of the panel after its slide-in animation is making it difficult for donors to enter their personal details and/or navigate back to previous panels if needed. And just looks jenky unfortunately. Perhaps adding a timeout on animationend for focus() to fire could be helpful.

This issue doesn’t occur on mobile device browsers that are not responsive to focus() (eg Chrome on iPhone or iPad). And doesn’t occur on desktop browsers unless the viewport width is reduced to narrow the 552px of the iframe. And also doesn’t occur if you remove the slide animation.