w3c / w3c/editing

iOS Safari: URL bar invisible hitbox overlaps text selection grab circle

Open
#550 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
202
Forks
43
PR merge metrics
No merged PRs in 30d

Description

In iOS Safari the bottom-floating address bar is occupying not just visual space at the center, but its bounding box occupies all the space left to right.

It's another situation (like #545) where iOS Safari uses too much space for its app chrome, so little screen estate is left for editing. In this case it leads to situations where you assume you can click/select something, but you can't, which can be frustrating to users.

Here's a demo/explanation (turn on audio) of @johannesmutter how this affects https://svedit.dev.

https://github.com/user-attachments/assets/485dd86c-99f6-4537-86bc-cb9e61231ab8.mp4

Considerations:

  • I think the large hitbox makes sense on any website in non-edit mode, so you can click close to the address bar to navigate somewhere else
  • However while editing content (especially while the VirtualKeyboard is open) this leads to a bad user experience

Questions

  • Could the hitbox be made smaller only when the VirtualKeyboard is open?
  • Could the address bar and the form assistant bar somehow be combined to save space?
  • Could there be a setting, so apps can deactivate the URL bar (and/or the form assistant bar) while the VirtualKeyboard is open?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file or test is named. Start by reviewing issue #545 and the linked demo to understand the related iOS Safari app-chrome behavior, then determine whether the issue should propose a specific platform capability or document the current limitation. Done means a focused, resolved proposal addressing the hitbox or keyboard-state behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, ios
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.