react / react/yoga

Incorrect computed height and top value with flex shrink 1 and specific floating point values

Open
#1,651 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Algorithm JavaScript
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

Report

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.