bug: ios caret is drawn in the wrong place when content is added above a focused field inside an ion-toolbar in ion-footer
Author: tzdevelopteamCreated Sep 4, 2026Updated Sep 4, 2026
Labelstriage
### Prerequisites
- [x] I have read the Contributing Guidelines.
- [x] I agree to follow the Code of Conduct.
- [x] I have searched for existing issues that already report this problem.
### Ionic Framework Version
v9.x (@ionic/core 9.0.2, also reproduced on 9.0.1)
### Current Behavior
On iOS, when a focused text field lives inside an `ion-toolbar` in a bottom
`ion-footer`, and an element is inserted ABOVE that field inside the same
toolbar, the text caret keeps its previous screen position instead of following
the field.
The field itself does not move (the footer is bottom-anchored, so it grows
upwards). The caret ends up drawn one inserted-element-height too high — visually
inside the newly added element, which is not editable at all.
The caret only corrects itself when the user types a real character. Programmatic
attempts to force a re-measure all have no effect: `setSelectionRange()` with the
same range, `setSelectionRange()` to a different range and back, `setRangeText('')`,
`document.execCommand('insertText', '')`, `blur()` + `focus()`, and toggling
`inputMode` off and back.
### Expected Behavior
The caret should stay with the field it belongs to, as it does on every other
layout change.
### Steps to Reproduce
1. Open the reproduction on an iOS device or the iOS Simulator (Safari or a
WKWebView).
2. Tap the text field in the footer so it has focus and shows a blinking caret.
3. Wait 2.5s — a 60px block is revealed above the field, inside the same
`ion-toolbar`.
4. The field stays put, but the caret is now drawn inside the gold block above it.
5. Type one character: the caret jumps back to the correct place.
### Code Reproduction URL
Self-contained single file, no build step, loads Ionic from the CDN:
https://gist.github.com/tzdevelopteam/2d444e8822c8dedbe43a4faa72df564a
(save the file and open it on an iOS device — it needs no build step)
```html
tap the field, wait 2.5s
the caret is wrongly drawn in here ``` ### Isolation already done - **`ion-toolbar` is required.** Putting the same markup directly in `ion-footer` (no toolbar) makes the caret behave correctly. That is the smallest difference between working and broken. - `ion-content` is NOT required — it reproduces with the footer alone. - Not `ion-textarea`: a plain light-DOM `Source: ionic-team/ionic-framework