vux
vux copied to clipboard
Published
20 hours ago •
airyland
airyland
ios 15.4.1 上 x-dialog 组件水平不居中，靠屏幕左边
具体需求：x-dialog 组件居中
原因：应该是 iOS 15.4.1 导致的，在 iOS 15.4.1 web 端的 jsBin 上可复现，链接：https://jsbin.com/beyuvajoco/1/edit?css,output
解决方法： 在 iOS 15.4.1 上有效，但不确定其他版本和安卓浏览器上是否会导致其他问题
- weui-dialog position: fixed; 改为 position: releative;
- weui-dialog display: table; 去掉
- weui-dialog margin: auto; 去掉
jsbin 中 html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='mask'>
<div class='dialog'>test text</div>
</div>
</body>
</html>
jsbin 中 css 代码(和 mask x-dialog 样式代码一致)
.mask {
border: 1px solid red;
bottom: 0;
left: 0;
position: fixed;
top: 0;
right: 0;
background: gray;
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
background: #fff;
border-radius: 0.3rem;
display: table;
margin: auto;
max-width: 30rem;
overflow: hidden;
text-align: center;
width: 80%;
height: 100px;
border: 1px solid blue;
position: fixed;
}
