[SOLVED] Why does the hidden element's parent visually "slide down" when hiding an element through v-show? Using Vue 2.7.x

Why does the hidden element's parent visually "slide down" when hiding an element through v-show? Using Vue 2.7.x

I was experimenting with a simple 2x4 full-screen grid layout using Vue to learn the basic how-tos, but I'm having trouble pinpointing the source of this rendering artifact. It must be some core Vue notion, I'm sure, as there's nothing complicated involved, but no amount of documentation re-reading has helped me so far. I managed to link the issue to the use of v-for (as everything works as expected if I copy-paste the cells instead) but I can't seem to grasp WHY.

The grid looks like this:

<div class="row">
   <template v-for="i in 3">
      <signal-cell>

where "signal-cell" component template looks something like:

<div><div class="header"> someText </div>
<div class="countdown" v-show="isCdShown"> 18:40 </div>

When isCdShow goes from true to false, it's like the parent gets "position: relative;top:30px;", as it gets visibly displaced downward. Of course, checking the element's style shows no margin or relative positioning.

This happens only when using v-for to render the cells, and gets even more pronounced whithout the .header div. I wrote a fiddle that shows this. It changes isCdShown's value after DOMContentLoaded+2s, but this happens even when using Vue devtools to change the value. jsFiddle

Solution

It's a feature of inline-block (the element is vertically aligning to a hidden baseline). You can correct it with

.main-col {
  vertical-align: top;
}

or with block display combined with flex

.main-col {
  display: block;
}
.main-row {
  display: flex;
}

updated jsFiddle (includes button for toggling rather than a timeout)