content: keyboard page needs on-screen keyboard layout guidance, and lifecycle samples read the wrong property
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 86/100
- Issue type
- Documentation
- Clarity
- Clearly specified
- Activity status
- Active
- Domain
- documentation
Research direction
Start with docs/developing/keyboard.mdx and compare its versioned counterpart at versioned_docs/version-v8/developing/keyboard.mdx, near Keyboard Lifecycle Events. Add guidance on visual versus layout viewport behavior, interactive-widget=resizes-content, 100dvh, and Capacitor resize modes, using #26702 for context. Done means both versions explain the behavior and alternatives accurately.
Written by the indexing model from the issue text.
Description
URL
https://ionicframework.com/docs/developing/keyboard
Issue Description
The page covers inputmode, enterkeyhint, dark mode, the accessory bar and lifecycle events, but never says what the keyboard does to the viewport. In a mobile browser or PWA, Chrome and current Firefox shrink the visual viewport and leave the layout viewport at full height, so anything anchored to the bottom of the page stays where it was and the keyboard is drawn over it. This affects ion-fab, ion-footer and ion-tab-bar.
That is intended behavior, and refer to #26702 for the reasoning on why we do not resize the layout viewport by default. The problem is that the page never tells developers this is the model, nor how to opt into the alternative, so it keeps getting refiled: #7013 (2016), #26702 (2023), #29765 (2024). Three reports over eight years for behavior that one documented meta key configures.
Suggested addition, as a section near Keyboard Lifecycle Events:
- The keyboard shrinks the visual viewport, not the layout viewport, in browsers and PWAs, so bottom-anchored elements do not move.
- Apps that want the layout to move can add
interactive-widget=resizes-contentto the viewport meta tag, with the caveat that footers and tab bars then move above the keyboard too. Verified on Chrome 133 and Firefox 155. 100dvhdoes not account for the on-screen keyboard and is not an alternative. Worth saying outright, because it is the first thing people reach for.- Capacitor apps should use the Keyboard plugin's resize modes rather than the meta tag.
Files
docs/developing/keyboard.mdx(v9)versioned_docs/version-v8/developing/keyboard.mdx
- Dominant language
- MDX
- Stars
- 621
- Forks
- 3.2k
- Avg merge
- 1d 2h
- Merged PRs (30d)
- 86
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.
More from ionic-team/ionic-docs
-
content package: angular
Difficulty 2/5 Half a day Newbie friendliness 78/100
ionic-team/ionic-docs#4702 ·
-
triage
Difficulty 1/5 Under an hour Newbie friendliness 80/100
ionic-team/ionic-docs#4546 ·
-
content: broken link Opencontent
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
ionic-team/ionic-docs#4381 · 2 comments ·
-
triage
Difficulty 1/5 Under an hour Newbie friendliness 72/100
ionic-team/ionic-docs#3639 ·
-
content package: angular
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
ionic-team/ionic-docs#3583 ·
All issues in ionic-team/ionic-docs
Similar issues
-
Link Checker Report Openautomated issue report
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Humanity AI Open
Difficulty 1/5 Under an hour Newbie friendliness 90/100
numfocus/project-fundraising#166 ·
-
area:proxy bug security severity:low track:open-source
Difficulty 2/5 1-3 hours Newbie friendliness 70/100