Bug 294558 – Inputs within inline-block containers shift vertically when text is deleted and re-entered into an input

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[beeps]

Text inputs that are aligned into a 'row' using inline-block on a parent element shift vertically when an input has the value removed and a new value inserted.

This has been observed taking place on the NHS Design System and the GOV.UK Design System's date input component.

Bug report in NHS Design System: https://github.com/nhsuk/nhsuk-frontend/issues/1227
Bug report in GOV.UK Design System: https://github.com/alphagov/govuk-frontend/issues/5861

These include video recordings of the issue taking place.

Reduced example: https://codepen.io/querkmachine/pen/QwbBpWm

## Reproduction steps

1. Open the reduced example in Safari on an iPad or iPhone running iOS/iPadOS 18.
2. Select one of the fields. Type one or two numbers.
3. Delete what you've just typed, type in one or two numbers again.

These bug reports were raised against Safari running on iPadOS 18.4, however I have been able to reproduce them on iOS and iPadOS 26 Developer Beta 1 as well.

Interestingly, I was unable to reproduce this issue in any version of iOS/iPadOS when testing via Browserstack, and reproducing it on physically owned devices was only consistent when screen recording was disabled. Turning on screen recording made the issue no longer occur.

This issue could not be reproduced on macOS Safari or in other non-iOS browsers.

## Expected

The field groups (the container around the label and input pair) should not move relative to one another.

## Actual

The field groups that were not being with shift downwards, with only the field group being interacted with remaining in the same location.

[Radar WebKit Bug Importer]

<rdar://problem/154094432>

[alan]

Thank you for reporting this bug.

It looks like baseline value changes between subsequent editings. I bet the internal structure (subtree) of the input box changes here causing this unexpected baseline value.

[alan]

Created attachment 475634 [details]
Patch

[alan]

Created attachment 475636 [details]
Patch

[alan]

Created attachment 475640 [details]
[fast-cq]Patch

[EWS]

Committed 296569@main (22d6d63a50dd): <https://commits.webkit.org/296569@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 475640 [details].