q-header in q-layout glitches

[hyungju]

<template>

  <q-layout view="lHh Lpr lFf" >
    <q-header  id="qh"  class="bg-primary">
      <div class="q-px-lg q-mb-md q-pt-sm" id="header"  style="display: flex; flex-direction: row; justify-content: space-between">
        <div class="text-h5 gmarket-sans-b">버거마스터</div>
        <q-btn size="0.7rem" color="white" text-color="primary">내 설문 보기</q-btn>
      </div>
    </q-header>

    <q-page-container>
      <router-view />
      <q-footer bordered class=" text-primary" style="background-color: #fafafa">
        <q-tabs

          indicator-color="transparent"
          active-color="black"
          style="color: #BEBEBE; "
          ripple="true"
          class=""
        >

          <q-route-tab name="mails" icon="home" to="/feed" />
          <q-route-tab name="alarms" icon="star" to="/home"/>
          <q-route-tab name="movies" icon="search" />
          <q-route-tab name="settings" icon="settings"/>

        </q-tabs>
      </q-footer>
    </q-page-container>

  </q-layout>
</template>

it’s my code.

<template>
  <q-page class="flex dd">
    <q-list  dense separator>
      <q-infinite-scroll @load="onLoad" :offset="250" :debounce="10" >

        <q-item v-for="item in items"  v-bind:key="item.uuid">
            <q-item-section class="card_section">
              <p>
                <strong>{{item.brand}}</strong>
                {{item.name}}
              </p>
              <div class="card_container">
                  <q-img v-bind:src="item.image" class="img"  style="border-radius: 10px"/>
                  <div class="rating_container">
                      <q-rating
                        @input="point => click(item, point)"
                        v-model="item.rating"
                        size="2rem"
                        icon="star"
                        color="grey-4"
                        color-selected="yellow-5"
                        class="no-shadow"
                      />
                  </div>
                </div>

              <q-separator />
            </q-item-section>

        </q-item>
        <template v-slot:loading>
          <div class="row justify-center q-my-md">
            <q-spinner-dots color="primary" size="40px" />
          </div>
        </template>
      </q-infinite-scroll>
    </q-list>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn fab icon="refresh" color="primary" @click="refresh()"/>
    </q-page-sticky>
  </q-page>
</template>

this will be rendered inside the template.

the problem is, when I scroll the page, the header glithces.
the header itself suddenly moves to top and shortly back to normal state.

I upload a video i’ve recorded.

https://drive.google.com/file/d/1WVpoS87y_rCTMt9ErdX0cghaQRs1nL-5/view?usp=sharing

[dobbel]

Does it glitch on other pages too? Or only on this page?

Does it glitch when you remove the q-infinite-scroll ?

[hyungju]

I think it glitches with all scrolls element

[dobbel]

@hyungju that’s not what I asked.

If you have a codepen or github people could help you better.