New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rough scrolling and broken styles with table #138

Open
Sayan751 opened this Issue Dec 20, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@Sayan751
Copy link

Sayan751 commented Dec 20, 2018

I'm submitting a bug report

  • Library Version:
    1.0.0-beta.3.3.2

Please tell us about your environment:

  • Operating System:
    Windows 10

  • Node Version:
    10.13.0

  • NPM Version:
    6.0.1
  • JSPM OR Webpack AND Version
    webpack 4.28.0
  • Browser:
    Chrome 71.x | Firefox 64.x

  • Language:
    TypeScript 3.2.2

Current behavior:
I have tried infinite scrolling with this package. As user scrolls down, I am adding 30 (chunk size) new items in the array. I have tried this on a normal bootstrap table and a table custom control (also based on bootstrap). In both the cases, I noticed similar problems:

  1. The scrolling in Chrome is too rough. The scrollbar as well as the table jumps to often, which results in a jerky scrolling. Sometimes, rows (and columns) expand/collapse automatically (without any explicit/intended user interaction apart from scrolling).
  2. Another major problem is that it breaks the style.

To demonstrate the problem I have created a repo: https://github.com/Sayan751/au-virtualization-demo
The repo also has some demo gifs that show the problem:

The screen captures are done on Chrome. The scrolling is somewhat better with Firefox, but it too has the problem with styling.

Expected/desired behavior:

  • What is the expected behavior?
    Smooth scrolling is expected that also keeps the styling intact.

  • What is the motivation / use case for changing the behavior?
    Better user experience.

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Jan 14, 2019

I have tested this issue against my latest commit. I couldn't reproduce it manually by scrolling up and down, so I'm not sure if I fixed it, or reproduced it incorrectly. @Sayan751 Would be nice if you could have a check and confirm. Demo app at https://dist-owjyzhcvev.now.sh/#/issue-138

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Jan 14, 2019

@Sayan751 Also can you help describe styling issue that you encountered?

@Sayan751

This comment has been minimized.

Copy link

Sayan751 commented Jan 15, 2019

@bigopon The problem with scrolling seems to be resolved in the the demo app. I will try to clone this repo and test the changes locally once.

The main problem that I had with styling is that for a striped table, sometimes the stripes are not applied at all, and all the rows will appear to have same style. That problem seems to be mostly resolved in your demo app. There is a minor glitch, where a light row becomes gray on scroll or vice versa. Not sure if that can be handled, as the browser will continue to apply the styles as per the CSS rules defined. When the DOM objects are removed, n+1th row become nth row and with that changes the effective CSS rules applied on the row.

It would be superb if you find a way to deal with that. If that is not possible, then maybe it is a good idea to add that as limitation in documentation.

@bigopon

This comment has been minimized.

Copy link
Member

bigopon commented Jan 15, 2019

@Sayan751 I'm not sure what can be done to deal with striped table, I think it's easier to employ css class based on $index and document them as workaround.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment