父元素应用transform属性后造成Dropdown组件发生偏移
OasisAkari opened this issue · comments
示例样本
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="https://unpkg.com/mdui@2.0.3/mdui.css">
<script src="https://unpkg.com/mdui@2.0.3/mdui.global.js"></script>
</head>
<body>
<div class="container-main">
<mdui-dropdown>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</div>
</body>
<style>
.container-main {
margin: 64px;
padding: 10px;
width: 80%;
height: 100vh;
background-color: #fff;
transform: translate(0px, 0px);
}
</style>
</html>
不知道这个属于组件实现的问题还是预期行为
mdui 的 dropdown 当前使用 position:fixed 定位，使用 transform 会影响 fixed 定位。
后续会改用 floating-ui 来实现定位功能，会解决该问题。