Mozilla VPN is currently experiencing an outage. Our team is actively working to resolve the issue. Please check the status page for real-time updates. Thank you for your patience.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox scrolling on tables not proper

more options

I am working on a website that uses ReactJS. The table has tables which can be scrolled horizontally and vertically depending on the amount of data (Scrolling of the table alone and not the entire page). The scrolling does not seem to happen in an even manner. The Horizontal scrolling creates some effect on the table headers. The table has some fixes columns on the left and scrollable columns on the right. So the vertical scrolling makes, the fixed portion to scroll a bit slower than the free portion, thereby the rows are not rendered evenly.

The same works fine with Chrome. There are no scrolling issues. This is not just an issue with the design I use. I also saw another issue opened. Giving you both the links below. https://github.com/ant-design/ant-design/issues/11214 https://github.com/palantir/blueprint/issues/1712

I am working on a website that uses ReactJS. The table has tables which can be scrolled horizontally and vertically depending on the amount of data (Scrolling of the table alone and not the entire page). The scrolling does not seem to happen in an even manner. The Horizontal scrolling creates some effect on the table headers. The table has some fixes columns on the left and scrollable columns on the right. So the vertical scrolling makes, the fixed portion to scroll a bit slower than the free portion, thereby the rows are not rendered evenly. The same works fine with Chrome. There are no scrolling issues. This is not just an issue with the design I use. I also saw another issue opened. Giving you both the links below. https://github.com/ant-design/ant-design/issues/11214 https://github.com/palantir/blueprint/issues/1712

All Replies (2)

more options

Hi, please check you code by URL or by Uploading to : HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/

Firefox loves clean code.

more options

On https://codesandbox.io/s/pkjy70z0m7

See attached screenshots.

Both browsers look lousy. Firefox has a gap because of a scrollbar on the header table.

The synchronization issue is caused by drawing separate tables and then trying to matching the scrolling between them using JavaScript.