1，问题表现
使用 vue3 的 Teleport 实现的 dialog 弹窗，但是在 ios app 中嵌套的 h5 中无法打开。
直接在ios手机浏览器中打开，没有问题。
安卓手机也没有这个问题。
初始关键问题代码如下：
<template>
<Teleport to="body">
<Transition name="modal">
<div v-if="open" class="fixed inset-0">
<div class="content"><!-- 内容 --></div>
</div>
</Transition>
</Teleport>
</template>
<style scoped>
.fixed {
position: fixed;
}
.inset-0 {
inset: 0;
}
</style>
2，解决步骤
1，teleport 的问题
因为这是旧项目（jsp）做前后端分离，使用 vue3 重写的。之前没有这个问题，所以猜测是 vue3 新语法问题。
果然去掉 Teleport 后，弹窗可以出现了，但样式又出问题了。
<template>
<Transition name="modal">...</Transition>
</template>
可是即便元素没有插入 body 中，但使用的是 fixed 定位，并且任何祖先元素中都没有设置transform、perspective 或者 filter 样式属性，所以也应该正常显示样式。
有问题的样式表现，和 top right bottom left 使用默认值一致。
2，inset 的问题
所以猜测使用了 inset 这个 css 属性导致的。
因为我想实现 dialog 的蒙层是固定定位+铺满全屏。所以样式设置如下：
.fixed {
position: fixed;
}
.inset-0 {
/* top: 0; right: 0; bottom: 0; left: 0; */
inset: 0;
}
将 inset-0 这个 class 样式替换如下，样式就可以正常显示了。
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
至此，问题虽然已经解决，但弹窗组件使用时的结构还是有问题，应该将 dialog 的根组件插入到 body 中才合理。
3，teleport 的问题之二
既然 <Teleport to="body"> 无法使用，那插入目标从 body 替换为其他元素，是否可行？
经过测试，html 也不行，最终设置为 <Teleport to="#app"> ，html结构也算满意了。
以上。