Почему el.style.offsetHeight считается не правильно если scale !=1
Здравствуйте, етот обрезаный 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> И анимация както-странно себя ведет... |
Удалось решить проблемму путем добавления overflow:hidden; в .select
анимацыя правда дерганая и я ненашел как сделать ее плавной при использованиии scale |
Часовой пояс GMT +3, время: 02:24. |