Case ce-0286-ios-viewport-keyboard-chrome-ios-en · Scenario scenario-ios-viewport-keyboard

iOS Chrome viewport behaves differently with keyboard

OS: iOS 16+ Device: Mobile (iPhone/iPad) Any Browser: Chrome (iOS) 120+ Keyboard: English (QWERTY) or iOS Virtual Keyboard Status: draft
ios chrome keyboard viewport position-fixed

현상

In Chrome for iOS, when the software keyboard becomes visible, viewport behavior may be different from Safari but the issue may still be present.

재현 예시

  1. Open Chrome for iOS on iPhone or iPad.
  2. Load the page with position:fixed element and contenteditable.
  3. Tap to show keyboard.
  4. Observe behavior of fixed element and viewport height.

관찰된 동작

  • Chrome iOS behavior: May handle keyboard differently than Safari
  • Less severe: Position issues may be less severe than in Safari
  • Still problematic: Fixed positioning may still have issues
  • Viewport behavior: Chrome iOS and Safari iOS differ in viewport handling

참고사항

This case observes Chrome for iOS behavior, which may differ from Safari but the fundamental issue of viewport keyboard handling still exists on iOS.

Chrome for iOS uses WebKit but may have different viewport implementation than Safari.

Before
Fixed Toolbar
Text input area
--
Page load: Fixed element normal, height displayed
Step 1: Show keyboard
Fixed Toolbar
Text input area
600
Chrome iOS: Keyboard shown, observe viewport height

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: iOS 16+
Device: Mobile (iPhone/iPad) Any
Browser: Chrome (iOS) 120+
Keyboard: English (QWERTY) or iOS Virtual Keyboard
Your environment
Sample HTML:
Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.

Comments & Discussion

Have questions, suggestions, or want to share your experience? Join the discussion below.