Description
Version
13.7.0
Steps to reproduce
<template>
<div class='wrapper'>
<div class='inner'></div>
</div>
<!-- <div style='display: flex; background: blue;'>
<div style='margin: 1rem; background: red;'></div>
</div> -->
</template><script>
export default {
mounted () {
console.log('Height 1', this.$el.clientHeight)
this.$nextTick(() => {
console.log('Height 2', this.$el.clientHeight)
})
setTimeout(() => {
console.log('Height 3', this.$el.clientHeight)
}, 300)
}
}
</script><style>
.wrapper {
display: flex;
background: blue;
}
.inner {
margin: 1rem;
background: red;
}
</style>
What is expected?
At least 'Height 2' (that happened after the $nextTick) expect to equal 'Height 3'. Ideally all 'heights' should be equal 'Height 3'.
What is actually happening?
'Height 1' and 'Height 2' return 0 and only after 'some' delay, 'Height 3' returns correct height.
This happens only when using styles within <style></style> tags within .vue files. When using in-line styles or external full-page styles, the 'Height 1' and 'Height 2' are returning correct height right away. You can check it by uncommenting the commented part of the template.
P.S. The issue is not reproducible on JSFiddle/JSBin/CodePen/CodePan because none of them seem to support vue-loader and .vue files. Yet I have put the example which works fine. But if you try to run it within a .vue file the bug will be evident.
P.P.S. This thing is required to get and match heights of absolutely positioned child elements.