Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ios 15.4.1 上 x-dialog 组件水平不居中，靠屏幕左边 #3814

Open
hchuzhong opened this issue May 14, 2022 · 0 comments
Open

ios 15.4.1 上 x-dialog 组件水平不居中，靠屏幕左边 #3814

hchuzhong opened this issue May 14, 2022 · 0 comments

Comments

@hchuzhong
Copy link

具体需求：x-dialog 组件居中

原因：应该是 iOS 15.4.1 导致的，在 iOS 15.4.1 web 端的 jsBin 上可复现，链接：https://jsbin.com/beyuvajoco/1/edit?css,output

解决方法：
在 iOS 15.4.1 上有效，但不确定其他版本和安卓浏览器上是否会导致其他问题

  1. weui-dialog position: fixed; 改为 position: releative;
  2. weui-dialog display: table; 去掉
  3. 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hchuzhong