gmariani
commented
3 years ago I figured out the issue.The root of the issue is how getRect() calculates in measureLayout.js. It uses offsetWidth, offsetLeft, etc. But all the offset properties round to the nearest integer instead of remaining a floating point. This comes into play when you have items in a row with no gap in between.
In my case, I have a rectangle that was 677.6 pixels tall, rounded to 678 by offsetHeight. It would calculate the cutoff coordinate to be 614 pixels. The next row (in the down direction) would have another rectangle with an offsetTop of 613 pixels. So when it came to filter out nearby siblings, it would ignore the row right below it because of a rounding error. One option is to switch to getBoundingClientRect() but that can incur some rendering penalties. The easiest solution I found was to just add a 2-5px gap between items to avoid the rounding error, thus recognizing the siblings properly.
So again, my solution is specific to my problem, but anyone else with items flush against each other, they could easily run into problems where it skips siblings due to rounding errors. I would suggest possibly finding an efficient way to call getBoundingClientRect() or build in a 1px tolerance when calculating siblings.
micheleb
asgvard
Describe the bug I have a vertical list of rectangles (dvd covers), 4 across and 4 down. The screen can display about 1.25 rows at a time. The first three rows are focusable, the last row is not. Once the focus reaches the bottom row, the siblings array is empty despite visualDebug recognizing the items.
To Reproduce Steps to reproduce the behavior:
Expected behavior To be able to focus on all focusable elements.
Screenshots
Additional context None