Vuetify v-app-bar doesn't shrink smoothly - vuetify.js

Question

I faced following problem with v-app-var.
When I scroll down, I expect app bar to shrink smoothly and evenly, but instead it behaves laggy
Here is an example to see it yourself , but screen size must be set to 1440х900 in order to reproduce a problem
https://qx5v2.csb.app/
Here's a video how it looks like
Please help me out.

Answer 1

Just run these commands :
<template>
<v-app>
<v-app-bar
app
class="light-blue"
dark
height="400"
shrink-on-scroll
fade-img-on-scroll
src="https://picsum.photos/1920/1080?random"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
></v-img>
</template>
</v-app-bar>
<v-main>
<v-container fluid>
<div>Lorem ipsum.</div>
<div>Officia, quos!</div>
<div>Modi, quas!</div>
<div>Sapiente, fugiat!</div>
<div>Facere, ex.</div>
<div>Alias, quaerat!</div>
<div>Exercitationem, vel.</div>
<div>Eligendi, architecto.</div>
<div>Minima, animi.</div>
<div>Nulla, aspernatur.</div>
<div>Consectetur, aliquid!</div>
<div>Tempore, commodi.</div>
<div>Odit, voluptas!</div>
<div>Excepturi, iste.</div>
<div>Optio, amet.</div>
<div>Eos, laudantium.</div>
<div>Facere, veritatis!</div>
<div>A, architecto!</div>
<div>Ad, tempora.</div>
<div>Optio, expedita.</div>
<div>Quasi, quas.</div>
<div>A, consequatur.</div>
<div>Aperiam, debitis.</div>
<div>Quod, modi.</div>
<div>A, consequatur.</div>
</v-container>
</v-main>
<v-footer app absolute>
<v-container>
<v-row justify="center">
<div class="ma-4">
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-facebook</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-instagram</v-icon>
</v-btn>
</div>
</v-row>
</v-container>
</v-footer>
</v-app>
</template>
<script>
export default {
name: 'layout',
components: {}
}
</script>