Skip to content

[BUG] Keyboard input in embedded iframe session broken on iOS Safari (WebKit) #270

@mujibsayyad

Description

@mujibsayyad

Describe the bug
Keyboard input inside an embedded Steel session iframe is broken on iOS. Backspace does not work and all
text types in uppercase regardless of caps lock state. The session is completely unusable for any form input on iOS.

To Reproduce

  1. Create a Steel session and embed it via <iframe src="{debugUrl}?interactive=true" />
  2. Open the page on any iOS device (iPhone or iPad)
  3. Tap on any input field inside the iframe
  4. Try to type — all characters appear in uppercase
  5. Try to delete a character using backspace — nothing happens

Expected behavior
Keyboard input works normally inside the embedded iframe — characters appear as typed, backspace deletes characters, autocapitalize respects the input's autocapitalize="none" attribute.

Screenshots/Video
https://github.com/user-attachments/assets/42f609a5-a585-4ac3-b146-4fe542d7a8c3

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):

  • Device: iPhone (tested on simulator + physical device)
  • OS: iOS 17
  • Browser: Safari (also reproduced on Chrome — both use WebKit on iOS)
  • Version: Safari 17

Additional context
We attempted a workaround by collecting credentials via a native form and typing them into the remote browser using CDP (connectOverCDP + Playwright pressSequentially). The text is successfully typed but Instagram's React submit button remains aria-disabled="true" and does not respond to keyboard.press('Enter'), click({ force: true }), or form.requestSubmit() — suggesting CDP key events are not fully triggering React's synthetic event system.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions