ios + vue3 Teleport + inset 兼容性问题

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解决步骤

1teleport 的问题

因为这是旧项目jsp做前后端分离使用 vue3 重写的。之前没有这个问题所以猜测是 vue3 新语法问题。

果然去掉 Teleport 后弹窗可以出现了但样式又出问题了。

<template>
  <Transition name="modal">...</Transition>
</template>

可是即便元素没有插入 body 中但使用的是 fixed 定位并且任何祖先元素中都没有设置transform、perspective 或者 filter 样式属性所以也应该正常显示样式。

有问题的样式表现和 top right bottom left 使用默认值一致。

2inset 的问题

所以猜测使用了 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 中才合理。

3teleport 的问题之二

既然 <Teleport to="body"> 无法使用那插入目标从 body 替换为其他元素是否可行

经过测试html 也不行最终设置为 <Teleport to="#app"> html结构也算满意了。

---

以上。