User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36 Steps to reproduce: https://jsfiddle.net/81p71ktr/ 1. Try it chrome - notice it works as expected scrolls by rows. 2. Scroll the colorful box and notice it doesn't always land perfectly on the top of a row (subtle stokes on mouse wheel). 3. Notice how uncommented the rule that sets height on each row fixes it. Actual results: Sloppy scroll by row, over time the top row isn't perfectly in view. Expected results: Perfect scroll by row.
QA Whiteboard: May require wheel mouse
Component: Untriaged → General
OS: Unspecified → Mac OS X
Hardware: Unspecified → All
Your script is buggy - it uses whole units of height/offset to deal with scrolling, so it breaks when the rows have non-integer heights. Because of Firefox's default CSS, they have a height of 19.2px on my mac. On Chrome, they have 18px of height. If you set height: 19.2px in chrome, it breaks there. There are lots of differences in default CSS between different browsers and even OSes (the font size will differ if people configure windows/linux/osx to use a different default size). So best not assume anything about the height of the row being a round number. This is not a Firefox bug, so I'm marking this as invalid.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Component: General → Untriaged
Resolution: --- → INVALID
Thank you that is it. I was assuming if an element is 19.2px tall and I fetch the height using clientHeight I'd get 19.2... turns out you get 19. getBoundingClientRect().height appears to contain the actual height :)
You need to log in before you can comment on or make changes to this bug.