When clicking on a textarea to edit the text this has a different effect on the visual viewport for Chrome on Android compared to Safari on iOS when the soft keyboard opens and maybe more importantly closes. In the case of Android Chrome, the height and width and scale of the visual viewport do not change when the textarea receives focus.
Chrome on Android Device
test.html:16 vvp width: 412.19049072265625
test.html:17 vvp height: 777.1428833007812
test.html:18 window.innerWidth: 412
test.html:19 window.innerHeight: 777
test.html:20 vvp scale: 1
Click in textarea and soft keyboard opens
test.html:16 vvp width: 412.19049072265625
test.html:17 vvp height: 452.19049072265625
test.html:18 window.innerWidth: 412
test.html:19 window.innerHeight: 452
test.html:20 vvp scale: 1
Close the soft keyboard
test.html:16 vvp width: 412.19049072265625
test.html:17 vvp height: 777.1428833007812
test.html:18 window.innerWidth: 412
test.html:19 window.innerHeight: 777
test.html:20 vvp scale: 1
However, in the case of Safari on iOS (iPhone 11 running iOS 14 - though the same occurs on multiple devices), the width, height and scale factor change on iOS as seen below.
Safari on iPhone 11
test.html:16 initial values
test.html:17 vvp width: 414
test.html:18 vvp height: 715
test.html:19 window.innerWidth: 414
test.html:20 window.innerHeight: 715
test.html:21 vvp scale: 1
Click in textarea opens soft keyboard
test.html:17 vvp width: 284.703125
test.html:18 vvp height: 311.53125
test.html:19 window.innerWidth: 285
test.html:20 window.innerHeight: 492
test.html:21 vvp scale: 1.454106330871582
Close the soft keyboard
test.html:17 vvp width: 285
test.html:18 vvp height: 492
test.html:19 window.innerWidth: 285
test.html:20 window.innerHeight: 492
test.html:21 vvp scale: 1.454106330871582
The issue (for me) is not so much that the sizes change when the focus shifts to the textarea for the user to enter text but more so that when the soft keyboard is closed, the screen does not revert back to the width, height and scale factor from before the soft keyboard was opened.
There is the option of saving sizes and using the cs variables as indicating in https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ and resetting when focus is lost but seems more complicated than necessary.
Any thoughts on how best to go about ensuring that after the soft keyboard has been activated how to get the viewport back to what it was previously would be greatly appreciated. Or, any css on the textarea to stop it from automatically causing a resize on iOS? I will work some js to save and reset the size based on the initial sizes and post it.
The test code i am using is the following
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style="background-color: pink">
<div style="background-color: blue; width: 95%;">
<textarea rows="2", cols="40" style="max-width: 100%;">0123456789012345678901234567890123456789</textarea>
</div>
<script>
const _handleVisualViewportChange = (_msg) => {
console.log(_msg);
console.log('vvp width: ', window.visualViewport.width);
console.log('vvp height: ', window.visualViewport.height);
console.log('window.innerWidth: ', window.innerWidth);
console.log('window.innerHeight: ', window.innerHeight);
console.log('vvp scale: ', window.visualViewport.scale);
};
var _resizeCount = 0;
window.visualViewport.addEventListener('resize', () => {
let _msg = 'resize_count = ' + _resizeCount++;
_handleVisualViewportChange(_msg);
});
_handleVisualViewportChange('initial values');
</script>
</body>
</html>