Frozen Columns jitter on horizontal scroll in react-data-grid

1
votes

I am using the react-data-grid. When i load the grid in mobile the frozen column flickers on horizontal scroll. This is the link to reproduce the error.

http://adazzle.github.io/react-data-grid/examples.html#/fixed-cols.

Just load the grid in mobile view and try to scroll horizontally.

Anyone who has faced this issue previously ,please suggest some solution

2
javascriptreactjsreact-data-grid

2 Answers

2
votes

In my case setting -webkit-overflow-scrolling to auto did not help. Also in this post sontek said that setting rowHeight will fix the ises what also did not work in my case.

Finally I had to remove the border-bottom from my custom TableRow component to get around this issue. Even playing around with box-sizing was not successful.

What I have done:

<div className={styles.tableRow}>
    {this.props.children}
+    <div className={styles.tableRowBorder} aria-hidden={true} />
 </div>

 .tableRow
 {
     // ...
-    border-bottom: 1px solid $colorGrayLighter3;
+    position:   relative;
 }
+
+.tableRowBorder
+{
+    height:         1px;
+    position:       absolute;
+    pointer-events: none;
+    width:          100%;
+    bottom:         0;
+    left:           0;
+    background:     $colorGrayLighter3;
+}

And for anyone that lands here, this is basically what the issue would look like:

UI:

ui flickering

DOM: dom flickering

0
votes

I was observing the same behaviour. Adding the following to the data grid container helped:

-webkit-overflow-scrolling: auto;