Здравствуйте, етот обрезаный language-dropdown-selector разкрывается если он нажат. Однако стоит мне поставить scale(!=1) как появляются el.style.offsetWidth считается не правильно (без учета scale). При изменение масштаба в браузере все норм а при scale нет... Что я делаю не так((?
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<div class="select">
<div class="main" @mousedown="isDropped = !isDropped">
<div class="option-main"></div>
</div>
<div class="dropdown" v-dropped>
<div class="container">
<div class="option">
<span>English</span>
</div>
<div class="option">
<span>Русский</span>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
body {
background: green;
}
.select {
width: max-content;
height: max-content;
transform-origin: top left;
transform: scale(16);
background: white;
position: relative;
font-size: 1.6vmin;
}
.main {
width: 100%;
box-sizing: border-box;
height: 2vmin;
display: flex;
align-items: center;
}
.option-main {
display: flex;
height: 2vmin;
width: 100%;
background: white;
}
.option {
display: flex;
height: 2vmin;
width: 100%;
background: red;
}
.dropdown {
height: 0;
overflow: hidden;
transition: height 1s ease;
background: white;
}
.container {
overflow: hidden;
}
.option-selected {
background: red;
}
</style>
<script>
let myVue = new Vue({
el: "#vue",
data: {
isDropped: false,
},
directives: {
dropped(el, binding, vnode) {
if (vnode.context.isDropped) {
el.style.height =
el.firstChild.scrollHeight + "px";
} else {
el.style.height = 0;
}
},
},
});
</script>
</html>
И анимация както-странно себя ведет...
