el-select为什么会让iPad退出全屏状态?

Question

点击el-select下拉选择，ipad为什么会退出全屏

大屏全屏状态下，点击el-select进行下拉选择，pc端正常，但是ipad会退出全屏，前端没有调用退出全屏的方法，怎么避免退出？
将下拉内容插入到body当中，点击时还是会退出全屏状态

Answer 1

https://stackoverflow.com/questions/65802939/disable-pull-down-to-exit-full-screen-mode-on-safari-ios
https://blog.csdn.net/flashdelover/article/details/128195812
https://cloud.tencent.com/developer/ask/sof/494802
没有ipad设备，无法测试，你可以尝试下面的代码
App.vue

<style>
.el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
   -webkit-overflow-scrolling: touch;
}
</style>

<style>
/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}
/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}
<style>

Answer 2

<template>
  <div class="container">
    <el-select 
      v-model="selectedValue" 
      placeholder="请选择" 
      @click.stop="handleClick" 
      @focus.stop="handleFocus"
      popper-append-to-body
      :popper-options="{ strategy: 'fixed' }">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
    };
  },
  methods: {
    handleClick(event) {
      // 阻止事件冒泡
      event.stopPropagation();
    },
    handleFocus(event) {
      // 阻止事件冒泡
      event.stopPropagation();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>