ios + vue3 Teleport + inset 兼容性问题

下雪天的夏风2023-11-18 17:27

1，问题表现

使用 vue3 的 Teleport 实现的 dialog 弹窗，但是在 ios app 中嵌套的 h5 中无法打开。

直接在ios手机浏览器中打开，没有问题。

安卓手机也没有这个问题。

初始关键问题代码如下：

html 复制代码

<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 后，弹窗可以出现了，但样式又出问题了。

html 复制代码

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

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

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

2，inset 的问题

所以猜测使用了 inset 这个 css 属性导致的。

因为我想实现 dialog 的蒙层是固定定位+铺满全屏。所以样式设置如下：

css 复制代码

.fixed {
  position: fixed;
}
.inset-0 {
  /* top: 0; right: 0; bottom: 0; left: 0; */
  inset: 0;
}

将 inset-0 这个 class 样式替换如下，样式就可以正常显示了。

css 复制代码

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

至此，问题虽然已经解决，但弹窗组件使用时的结构还是有问题，应该将 dialog 的根组件插入到 body 中才合理。

3，teleport 的问题之二

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

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

以上。