Strange behavior on mobile chrome and modals

I recently got informed that mobile users on chrome/android are experiencing a little "funny" behavior on modals. The autofocus does not work as expected and the view is always scrolled to the bottom.

This happens on modals, which are embedded at the end of the page.

Examples

Sandbox

I created this little sandbox (https://codesandbox.io/s/little-firefly-ruytgy?file=/src/App.vue) to demonstrate the issue.

Screencast

I also created a little screencast.

Code example

This is the code of App.vue in this example:

<template>
  <div class="h-screen">
    <div class="h-96 bg-red-500 flex justify-center items-center">
      <span class="text-white">Scroll down...</span>
    </div>
    <div class="h-96 bg-red-500 flex justify-center items-center">
      <span class="text-white">Just a little bit more...</span>
    </div>
    <div class="h-96 bg-red-500 flex justify-center items-center">
      <span class="text-white">You are almost there...</span>
    </div>
    <div class="h-96 bg-red-500 flex justify-center items-center">
      <span class="text-white"
        >Here we are. Now scroll down and click the button...</span
      >
    </div>

    <SimpleModal ref="mymodal">
      <template #dialog>
        <InputField name="test1" v-model="value1" />
        <InputField name="test2" v-model="value2" />
        <InputField name="test3" v-model="value3" />
        <InputField name="test4" v-model="value4" />
        <InputField name="test5" v-model="value5" />
        <InputField name="test6" v-model="value6" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
        <InputField name="test7" v-model="value7" />
      </template>
    </SimpleModal>
    <div class="flex justify-center items-center mt-4">
      <button class="border p-4" @click="$refs.mymodal.openModal">
        Open Modal
      </button>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import InputField from "./components/InputField.vue";
import SimpleModal from "./components/SimpleModal.vue";

export default {
  components: {
    SimpleModal,
    InputField,
  },

  setup() {
    const isOpen = ref(false);

    return {
      isOpen,
      closeModal() {
        isOpen.value = false;
      },
      openModal() {
        isOpen.value = true;
      },
    };
  },
  data() {
    return {
      value1: null,
      value2: null,
      value3: null,
      value4: null,
    };
  },
};
</script>

Ugly workaround

For now I created a little ugly workaround: Before the modal is being opened, use

window.scroll(0,0);

to scroll to the top. That's not really what I want, because if the person closes the modal, the person has to scroll down all the way again.

from Strange behavior on mobile chrome and modals