Spotlight focus behaving differently depending on screen resolution. about enact HOT 5 CLOSED

I created a quick demo project that reproduces the bug: https://github.com/DrakeWitt/enact-virtuallist-bug-demo

from enact.

Hi @DrakeWitt Thanks for reporting the issue with detailed information! We will look at it shortly. Can you share your code so that we can reproduce it?

from enact.

@DrakeWitt Good catch! 👍 The issue is reproduced with your sample and we're finding what actually happened inside.

from enact.

@DrakeWitt
Due to non-integer rectangle boundaries of focusable elements, there is some issue with choosing the next focus target on key down. We're finding a proper way to handle this and we will ship it in the next release. Until the next release, changing items smaller (at least 1px) inside lists could be helpful.
I found you don't pass rest params in itemRenderer function. It looks not an actual case but a sample code, but I left some notes for sure. If rest params are not passed, focus navigation inside lists does not work well. Refer enactjs.com

from enact.

This issue is resolved in #2997 and will be shipped in the next release.

Note that the issue occurs when a spottable element is NOT contained inside a spotlight container. Normally this does not happen since app developers make elements' size fit into a container. In the reproducing sample, elements' size is calculated with a floating-point parameter to match with viewport size and becomes slightly larger than container size. The fixed code is to allow an epsilon (under one px) on comparison between a container and an element to support various size units which lead to floating-point calculation and size mismatching.

from enact.