Version

2.7.14

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. Open page with vuejs project with any editable item (e.g. input) on mobile android device
2. Rotate device into landscape mode
3. Focus on any editable item (e.g. input)
4. Type any symbol
5. Rotate device to 180deg avoiding resize to portrait mode (flip it or rotate through the top side of device)
6. Type any symbol
7. Blur from editable item (e.g. input)

What is expected?

Keyboard close normaly

What is actually happening?

After keyboard is closed body tag will be malformed with blank space under it (blank space with keyboard height), but html tag will take 100% of device landscape height.

Environment: Device: OnePlus 3, OnePlus 7 Pro, OnePlus 7T Pro, OnePlus 8 Pro Android version: 9, 11, 12, 13 OS version: OxygenOS ^9.0.6 vuejs version: ^2.7.14, ^3.2.13

Additional:

This bug can be easily reproduced with default vue-cli project just adding input.

e.g.

<template>
  <input type="text">
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
html {
  background-color: aqua;
}
body {
  background-color: #fff;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

https://user-images.githubusercontent.com/19506390/211562830-69bbe0e7-eb4a-461b-ac8d-efbeae37d75c.mp4

did you try testing out without Vue? This seems a bit too weird to be related to vue itself

Sorry, my bad - faced it working with Vue project. It seems the issue is Google Chrome behaviour in this situation and devices, e.g. Mozilla Firefox working fine. For example, same issue detected with React + input