Skip to content

Layout bug caused by floating point rounding error #749

@leafduo

Description

@leafduo

Report

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.
screen shot 2018-04-08 at 20 30 26

Link to Code

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

image

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions