Taffy silently returns buggy layouts when NaN values are passed as input styles
- Dominant language
- Rust
- Stars
- 3.6k
- Forks
- 222
- Avg merge
- 10h 41m
- Merged PRs (30d)
- 40
Description
I am trying to run taffy in NativeScript and have succeeded so far on android where everything compiles are runs as expected although I am seeing some unexpected behavior in calculated widths of elements:
```js
// This is the root flex layout node
const container = new TaffyNode(500, 500);
// Setting the style to the root
container.setLayout((lp) => {
lp.justifyContent(app.visly.stretch.JustifyContent.Center);
lp.alignItems(app.visly.stretch.AlignItems.Center);
lp.alignContent(app.visly.stretch.AlignContent.Center);
});
// Create a node of 200 width/height
const node1 = new TaffyNode(200, 200);
container.addChild(node1);
// Create a node of 50 width/height inside node1
const node2 = new TaffyNode(50, 50);
node2.setLayout((lp) => {
lp.alignSelf(app.visly.stretch.AlignSelf.Center);
});
node1.addChild(node2);
// Compute the layout
container.computeLayout();
// Container width is 500;
console.log(container.layout.getWidth());
// node1 width comes out to be 50 however it should have been 200 since i have set the size explicitly. it seems
// that it sizes itself to size of the child.
console.log(node1.layout.getWidth());
// node2 height comes out to be 0 when it should be 50 since i have set the size explicitly.
console.log(node2.layout.getWidth());
```
It seems I am missing something here or is it how it will behave? I previously tried Yoga and the size of nodes would always be correct. This is problematic because it will lead to Views not being positioned correctly in center horizontally.
If i set minSize property is set same as size then the size of the node changes to correct value, i.e 200 in case of node1 and it is positioned correctly.
Taffy Version: Latest commit on main branch
Contributor guide
Research direction
Start by reproducing the NativeScript/JavaScript example in the issue, focusing on the explicit width and height values and the comparison with minSize. The payload names no source files or tests, so trace the style-input and layout-computation entry points from that reproduction. Done means explicit sizes of 200 and 50 are preserved and the child remains correctly centered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, rust
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100