ios + vue3 Teleport + inset 兼容性问题

目录

  • 1,问题表现
  • 2,解决步骤
    • [1,teleport 的问题](#1,teleport 的问题)
    • [2,inset 的问题](#2,inset 的问题)
    • [3,teleport 的问题之二](#3,teleport 的问题之二)

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 定位,并且任何祖先元素中都没有设置transformperspective 或者 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结构也算满意了。


以上。

相关推荐
gnip2 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼4 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku8 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript