I have noticed a bug whereby StyleLength (eg. ve.style.marginLeft/width/height/etc) cannot respect float based settings that is manifesting in two ways.
This is evident if for example you add a series of identical VisualElements to a row type VisualElement parent (eg. a menu icon bar). Using a background image for this with static spots for the icons will make it apparent if they are then lining up where they ought to.
In such an example:
Width/height/margin values are truncating the decimal place rather than rounding. That is, if you set a margin for the icon elements (to adjust their spacing) from 8, to 8.1, to 8.2, etc. to 8.9, all these numbers manifest the same outcome. Then if you go to 9 finally the position changes but you can’t get anything between. That is:
ve.style.marginLeft = 8; // gives same results for 8.0f-8.9f
Without the capacity for incremental adjustments between 8 and 9 it is very hard or impossible to get groups of things to line up. Small misalignment magnifies over the number of elements.
If the Panel Settings Scaling is set to match by width, and you then change the output resolution, you should get the same alignment of elements at all resolutions. However, this does not work. Sometimes the elements will be too crowded, and sometimes too spaced apart.
I suspect this is a manifestation of the same problem. I believe it is attempting to scale the values to intermediate floats but they are being truncated to integers thus getting the same random position jumps.
This is being observed in 2021.2.9f1 and from my perspective it’s a pretty severe bug as it makes it impossible to align anything effectively or consistently across resolutions. I hope it’s something that wouldn’t be too hard to fix and I hope you are able to fix it.
The result of the layout is aligned so that the elements fill whole pixels. This remove problems with aliasing and blurred features.
When we change the scaling, values are aligned on the real pixel grid that does not correspond to integers. In this case, any rounding is made so that two element with the same absolute values are rounded to the same size. With this, if you have two row of items with the same parameter, they should line up.
The percentage and flex values are handled differently, as they need to “split up” the total space of their parent. For example, if there are 3 elements with a flex value of 1 on a row, they will need to fill their parent that has a width of 10px. To achieve this, there will be 2 elements of 3 pixels and one element of 4 pixels. If there were to have the same value of 3, there would be a gab somewhere where we would see the background and if they were to be all 4px then they would overflow their parent.
This is a common issue with browsers, and I have seen different behaviors between the major ones.
When using constant pixel size, the result will be the same on every platform. The convenience of having an automated scaling factor is one thing that highlight these problems. When looking at the overall places where the display size can vary dynamically, we have the editor game view and windowed player that can be resized. This is not how most of the games are played, so I have a suggestion that could help you to get the same alignment.
You can manually drive the scaling factor so that the values are multiples of 1. For example, if you author your UI to be 1000 to 2000 pixels wide, with some flexibility as to accommodate varying aspect ratio for example. That UI could be rendered at a scaling of 1 if the real screen is between 1000 and 2000, but then the scaling factor could be bumped to 2 for 2000 to 3000 and then to 3 from 3000 to 4000.
I hope this can get you started, but don’t hesitate to ask follow-up questions.