When i use the following values for a FlexItem
FlexItem item(*button);
item = item.withFlex(1.0f);
item.maxWidth = 40.0f;
item.margin.right =1.0f;
flex.items.add(item);
When no scaling happens the margins are correct and show a space of 1 pixel between my coloured palette buttons. When scaling does occur often the 1 pixel margin is not present.
Margins OK:
Margins Incorrect:
This happens on OSX, no Retina.
I think Flexbox is doing its job properly, and all the coordinates in the FlexItems are almost certainly correct, but… they’re floating point, and the components themselves get aligned to integer coordinates, so what you’re probably seeing here is just snapping artefacts where the components are being asked to go to non-integer coords.
Other than changing the entire Component class to use floating point coords (which is something I’d one day like to do!) there’s not really much that could be done, other than leaving a bit more or less space so that the phasing effect isn’t noticeable.
Ok, i tried setting the margin to a different value.
I used 1.1f 1.2f or 1.3f as margins and when i use those the margins are actually almost never correct. Actually this is even worse, when no scaling has to be performed the margins are already incorrect. And i understand this is because of the non-integer coords, but it’s odd that the Margins are not even visible.
I hoped to replace my own loop (setting bounds for each button with some fiddly calculations) with FlexBox but that’s a no go then for now.
I’m able to get the right behaviour myself without FlexBox so i’m not completely convinced yet there is no fix for this.
You could choose to round to whole numbers and let the last item take up the extra space. That’s what i do now more or less.
Another easy fix would be to just have zero margins and make the components themselves not draw their rightmost pixel.
