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

New Issue

2024-04-26T09:22:18-07:00

bbohlender commented

2024-04-26 09:22:18 -07:00

(Migrated from github.com)

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 }))

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/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 ```js 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 }))`

👀 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1651