Cross Browsing: Fixing the Keyboard Covering the Screen on iOS

The problem

While developing the Autowini claim project, I had to build a responsive web app in React so the chat UI worked well on web, mobile, and in the app. Most environments had no problems. On iOS, though, when typing into an input or textarea, the keyboard came up and the page did not recognize the screen's width, so the keyboard covered the screen.

The fix

To fix this, I used CSS and JavaScript to reset the vh (viewport height) value dynamically when the screen height changes. Here is the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20/* css */
#viewContainer {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* main.tsx */
useEffect(() => {
    const resizeListener = () => {
    const vh = window.innerHeight * 0.01
	document.documentElement.style.setProperty('--vh', vhpx);
	};

    resizeListener();

    window.addEventListener('resize', resizeListener);
    return () => {
    window.removeEventListener('resize', resizeListener);
    };
}, []);

Posts I referred to for the fix

https://icksw.tistory.com/87

[iOS app development] How to fix the keyboard covering the screen! (NotificationCenter) (in Korean)

My goal from here: I plan to study React Native so I can cover both WebView and native.

https://toss.tech/article/react-native-2024

The future of React Native technology that Toss envisions (in Korean; Toss is a Korean fintech company)