Safari Desktop: Adding an empty span to an otherwise empty editable element, makes the element unselectable
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 202
- Forks
- 43
- PR merge metrics
- No merged PRs in 30d
Description
CONTEXT: As an editor developer I need a way to position popovers relative to a collapsed cursor. That's why I'm rendering an additional span at the cursor position with an anchor-name, so I can use CSS anchor positioning to position a popover/prompt (e.g. for adding a new link).
BUG: With the extra span in place, in Safari the field(s) are no longer selectable.
In Chrome and Firefox it works just fine.
See Repro: https://w3c.github.io/editing/repros/516.html
CONTEXT:
Behavior of empty fields broken on Safari at https://svedit.dev (v0.5.0)
https://github.com/user-attachments/assets/9163e5fe-be8f-4ba5-803f-c282b66c72de
Popovers anchored at selection highlight span, using CSS Anchor positioing:
https://github.com/user-attachments/assets/e07dd78d-50af-4735-a8d4-b731721be914
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction at w3c.github.io/editing/repros/516.html and compare the empty editable element with its additional span in Safari, Chrome, and Firefox. Use the svedit.dev example for context; done means the field remains selectable in Safari while retaining the cursor-position anchor span.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100