Using CSS Parameters to Stop Content Shifting with Dynamic Vue/React Content

Con­tent Shift­ing, also known as Con­tent Jump­ing, hap­pens when ele­ments of a web page change height while a page is load­ing. This can be dis­ori­en­tat­ing to users, and in extreme cas­es can cause prob­lems if a user clicks on an ele­ment as it moves, caus­ing unde­sired input. It’s also expect­ed in 2021 that search engines will begin penal­is­ing con­tent that exhibits con­tent shifting.

To avoid con­tent shift­ing, the ele­men­t’s height would be set regard­less of the dynam­ic con­tent it contains.

When using Vue or React JavaScript frame­works, I’ve found that CSS para­me­ters are use­ful. In my exam­ple, a Vue app loads dynam­ic con­tent and dis­plays it. Unfor­tu­nate­ly this caus­es con­tent shifting.

To avoid this, I pass the num­ber of rows in the HTML/view:

1
<div class="container" style="--preload-row-count: {{ $count }};">...</div>

In my CSS/SASS stylesheet, I then use this para­me­ter in a cal­cu­la­tion. There are two columns, so the num­ber of rows is divid­ed by 2. It is then mul­ti­plied by the height of a sin­gle row, and a min­i­mum height is set for the con­tain­er so that it will not shift:

1
2
3
4
.container{

    --calculated-board-rows: calc( var(--preload-row-count) / 2);

    min-height: calc( var(--calculated-board-rows) * 50px );

}

This fair­ly sim­ple method is an effec­tive way to stop con­tent shift­ing using CSS para­me­ters and calculations.