screen is getting flickering on some position of scroll(PositionPlugin)

[sansetty2510]

Griddle version

1.11.1

Expected Behavior

screen need to render properly

Actual Behavior

screen is getting flickering

Steps to reproduce

I debug the issue I came to know that if we are using 'PositionPlugin' in the 'tbody' by default one row(tr) is getting created(called SpacerRow) and on each scroll the height of that 'tr' is changing in some position of scroll bar the value is keeping on updating and not stooping this is reason the screen is getting flickering

Pull request with failing test or storybook story with issue

While this step is not necessary, a failing test(s) and/or a storybook story will help us resolve the issue much more easily. Please see the README for more information.

[dahlbyk]

@sansetty2510 my guess would be it's an off-by-one error around a boundary condition. I would struggle to troubleshoot this without some way to reproduce it, but I would start by looking at where the height value for that tr is coming from and work backwards from there to find the calculation that's causing issues.

Start here: https://github.com/GriddleGriddle/Griddle/blob/2988f42dd4b3db027587694028783f6507e7848d/src/plugins/position/components/TableBody.js#L6-L8 https://github.com/GriddleGriddle/Griddle/blob/a0df30779cf2fbbb2444e2faccf2b09b1018db55/src/plugins/position/components/SpacerRow.js#L13-L20 And here: https://github.com/GriddleGriddle/Griddle/blob/a0df30779cf2fbbb2444e2faccf2b09b1018db55/src/plugins/position/selectors/index.js#L58-L73 https://github.com/GriddleGriddle/Griddle/blob/a0df30779cf2fbbb2444e2faccf2b09b1018db55/src/plugins/position/selectors/index.js#L38-L46

[sansetty2510]

@dahlbyk I am not able to fix this issue is there any solution for this?

[dahlbyk]

Without a repro or more details, we're not able to troubleshoot further. I haven't seen this yet.

What browser are you using? Is the data in the table "big" (i.e. are the table rows taller than a single line)?

[sansetty2510]

@dahlbyk I am using chrome only. If data is more it is coming in the new line(inside the column) on that case also i am observing flickering issue, i am working on this.

[sansetty2510]

This issue is because of if the data is big in the column and coming to second line, added some CSS style to fix this issue.

[sansetty2510]

@dahlbyk Steps to reproduce

1. Create a simple griddle with plugin as below a. plugins={[LocalPlugin, PositionPlugin({ tableHeight: 350 })]}
2. create a data object shown in below(create multiple data so you can scroll) { name: 'asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd', age: 'asdasdsad asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd', active: 'false asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd', action: 'action asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd', address: 'address asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd asdasd' }
3. create a column definition’s show in below(create coloumn definition for all name, age, active, action and address) \<ColumnDefinition id='name' title='Name' width={400} filterable \/>

After some scroll you can see some flickering of scroll bar

[sansetty2510]

Any one please suggest me how to fix this issue. @dahlbyk please suggest