Layout bug caused by floating point rounding error

Report

• I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

• Layout multiple layers of views, and put a label as leaf node.
• Run it in a 3x resolution screen, like iPhone X or one of the Plus models.

Expected Behavior

The text on the label should be displayed without problem

Actual Behavior

The text got truncated.

Link to Code

Example project to reproduce the issue https://github.com/leafduo/yoga-rounding

The problem was caused by the accumulation of floating point rounding error in complex layout. The view tree in the example has a height of 4, and causes floating point rounding errors to accumulate. In YGRoundValueToPixelGrid, the fractialvariable is 0.999877929 and is considered not a whole integer. In the end, the width of the label is one pixel short, causing the text truncation.

This issue is presented when pointScaleFactor is 3 (not 1 or 2), and perhaps it's because 1) 3 is bigger and will cause more error, and 2) multiply and division by 2 is pretty accurate because the binary nature of computer.

Using double instead of float to represent points, or raising the threshold in YGFloatsEqual will make the text fully displayed in the example, but not solve this problem completely. It will still exist in a more complex layout.

I think maybe we can store scaled value or use a real fraction representation?

Start with YGRoundValueToPixelGrid and YGFloatsEqual, then run the linked yoga-rounding example at pointScaleFactor 3. Trace how accumulated floating-point error produces a fractional value near 1 and leaves the label one pixel short. Done means the reproduced label text is no longer truncated without breaking other layout rounding cases.