Date Input layout shift on iPad

[rowellx68]

Bug Report

What is the issue?

On iPad we are seeing some layout shift within Date Input in certain scenarios. Curiously, this issue does not happen when screen recording is in session or within Xcode Simulator.

This issue occurs in the GOV.UK date input as well.

What steps are required to reproduce the issue?

1. Go to the date input standalone example
2. Enter 12 in the Day input
3. Delete 12 from the Day input
4. Enter 1 in the Day input

The same steps could be applied to the Month and Year inputs will produce a similar effect.

What was the environment where this issue occurred?

• Device: iPad Pro (11-inch) (4th generation)
• Operating System: iPadOS 18.4
• Browser: Safari
• Browser version: 18.4
• NHS.UK frontend package version: 9.3.0
• Node version: N/A
• npm version: N/A

Is there anything else you think would be useful in recreating the issue?

[colinrotherham]

Thanks @rowellx68

I've tried on my own iPad (same version, iPadOS 18.4) and can't replicate it

Could you give it a try without any Safari extensions running please?

[rowellx68]

Thanks @colinrotherham. I've tried it again without any extensions and it still happens. Here's a video of me doing testing it since screen recording seems to be preventing the issue for happening.

IMG_0777-converted.mov

We also tested and could reproduce with an iPad Air (4th gen, iPadOS 18.4) without any extensions.

[colinrotherham]

Ah ha, gotcha

Yep I can reproduce it now, video was a big help—thanks

Would you mind raising this please on GOV.UK Frontend issues or I can raise it for you?

(Our NHS component was copied from GOV.UK Frontend)

[rowellx68]

Sure, I'll report it over there as well and will record a similar video

[colinrotherham]

Brilliant, thanks

Just tried adding vertical-align: top to .nhsuk-date-input__item and it fixes the issue for me

Update: Probably want vertical-align: bottom as it's the input alignment that's more important