Incorrect computed height and top value with flex shrink 1 and specific floating point values
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Report
- I have searched existing issues and this is not a duplicate
Some kind of overflow happens if there are at least 3 children, each returning a .01 value in the measure function, and their summed height is greater than 32; all children must set flex-shrink to 1,, and the available height must be smaller than the summed margins.
I am using the npm yoga-layout/load version 3.0.4
Issues and Steps to Reproduce
const yoga = await loadYoga()
const config = yoga.Config.create()
config.setUseWebDefaults(true)
config.setPointScaleFactor(100)
const node = yoga.Node.create(config)
const child1 = yoga.Node.create(config)
const child2 = yoga.Node.create(config)
const child3 = yoga.Node.create(config)
node.setHeight(99)
node.insertChild(child1, 0)
node.setFlexDirection(FlexDirection.Column)
child1.setMargin(Edge.Bottom, 100)
child1.setMeasureFunc(() => ({ width: 1, height: 10.01 }))
child1.markDirty()
node.insertChild(child2, 1)
child2.setMeasureFunc(() => ({ width: 1, height: 10.01 }))
child2.markDirty()
node.insertChild(child3, 2)
child3.setMeasureFunc(() => ({ width: 1, height: 12.01 }))
child3.markDirty()
node.calculateLayout(undefined, undefined)
console.log(child1.getComputedHeight(), child1.getComputedTop())
console.log(child2.getComputedHeight(), child2.getComputedTop())
console.log(child3.getComputedHeight(), child3.getComputedTop())
Expected Behavior
console output should be
0 0
0 100
0 100
Actual Behavior
5248133 0
5248133 5248233
6296710 10496366
Changing the measure function of any child to a value retuning .02 returns the correct output
e.g. child1.setMeasureFunc(() => ({ width: 1, height: 10.02 }))
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the provided npm yoga-layout/load 3.0.4 reproduction, including the measure functions, flex-shrink settings, and calculateLayout call. Compare the computed heights and top values with the expected output; the issue is done when these floating-point inputs no longer produce the large incorrect values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100