nhsuk-frontend icon indicating copy to clipboard operation
nhsuk-frontend copied to clipboard

Published 20 hours ago • verified publisher icon nhsuk

Date Input layout shift on iPad

Open rowellx68 opened this issue 7 months ago • 5 comments

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?

Image

Image

rowellx68 avatar Apr 10 '25 11:04 rowellx68

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?

colinrotherham avatar Apr 10 '25 15:04 colinrotherham

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.

https://github.com/user-attachments/assets/563d80ce-f631-4b52-bb66-b85187fc4e5c

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

rowellx68 avatar Apr 11 '25 09:04 rowellx68

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)

colinrotherham avatar Apr 11 '25 09:04 colinrotherham

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

rowellx68 avatar Apr 11 '25 10:04 rowellx68

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

colinrotherham avatar Apr 11 '25 10:04 colinrotherham

Closed by https://github.com/nhsuk/nhsuk-frontend/pull/1699

Thanks @rowellx68

colinrotherham avatar Nov 21 '25 16:11 colinrotherham