Header moving around while scrolling

[rogala000]

When scrolling up and down on table with header, it moves around for the duration of scrolling.
I tried "useMarginInsteadOfTranslate" but it didn't work.
I've noticed this bug only on mobile. "transform: translateY" on thead seems to have a delay and can't keep up with changes, so it moves weirdly and after scrolling is finished goes to a proper position. Setting checkResizeInterval to 0 or 1 also didn't fix it.

[jordimarimon]

I have also been experiencing this on Firefox but not in Chrome.

I did this to solve the problem temporally:

<div class="table-container">
  <div class="header">
    <span *ngFor="let column of columnNames"> {{ column }}  </span>
  </div>
  <virtual-scroller
    #scroll
    class="w-100 h-100"
    [items]="data"
    [bufferAmount]="50"
    executeRefreshOutsideAngularZone="true"
  >
    <table class="w-100" #table>
      <tbody class="text-center" #container>
        <tr
          class="w-100 d-flex justify-content-between align-items-center c-row"
          *ngFor="let row of scroll.viewPortItems"
        >
          <td *ngFor="let item of row" class="equal-size">
            {{ item }}
          </td>
        </tr>
      </tbody>
    </table>
  </virtual-scroller>
</div>

I put the header outside of the table and that way it doesn't move.
I don't know if this can help you!

[speige]

Unfortunately, this is a known bug with the library that we're not sure how to fix. The code that renders the header is a bit complicated & we couldn't find a way to position it perfectly. However, it seems to be "good enough" for most people.

If you're able to find a permanent fix, please submit a pull request. Thanks!

[jfgreffier]

Hi! I met this issue and it seems linked with display that has a device pixel ratio higher than 1.

Could it be that the offset calculation is wrong in this case ?