q-header in q-layout glitches



  • <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



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

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



  • I think it glitches with all scrolls element



  • @hyungju that’s not what I asked.

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


Log in to reply