父元素应用transform属性后造成Dropdown组件发生偏移 #296

OasisAkari · 2024-02-09T08:18:41Z

示例样本

<!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>

不知道这个属于组件实现的问题还是预期行为

zdhxiong · 2024-02-09T08:35:21Z

mdui 的 dropdown 当前使用 position:fixed 定位，使用 transform 会影响 fixed 定位。
后续会改用 floating-ui 来实现定位功能，会解决该问题。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

父元素应用transform属性后造成Dropdown组件发生偏移 #296

父元素应用transform属性后造成Dropdown组件发生偏移 #296

OasisAkari commented Feb 9, 2024

zdhxiong commented Feb 9, 2024

父元素应用transform属性后造成Dropdown组件发生偏移 #296

父元素应用transform属性后造成Dropdown组件发生偏移 #296

Comments

OasisAkari commented Feb 9, 2024

示例样本

zdhxiong commented Feb 9, 2024