Can you please explain the mysterious appearance of ghostly indents upon clicking when the height is set to 0? These indents only become visible after the dropdown opens and the height is subsequently adjusted to zero. Also, what causes the jerky animation effect? Removing the scale stops the twitching animation but leaves behind phantom indents of approximately 1px (what could be causing this?). This anomaly is most prominent at a resolution of 1360x768. https://i.sstatic.net/qqbvf.png
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7d1d2c2e7958991899695">[email protected]</a>/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>