Measured nodes in a cached subtree grow by a rounding step on every layout pass

Abierto
  • ¿Algo no está bien?
#2,053 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@salmanmkc ya está trabajando en esto.

Desde el 30/10/2026.

  • #2054 de @salmanmkc — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
cpp, javascript, node.js
Área
frontend

Línea de trabajo

Start by running the provided Node.js reproduction with Yoga 3.2.1 and compare it with the point-scale-factor-zero result. Trace how calculateLayout handles cached subtrees and pixel-grid rounding for measured nodes; the payload does not name source files or tests. Done when repeated layout passes leave unchanged measured-node heights at 28.8 and a regression test covers this cached-subtree case.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

With a point scale factor set, measured nodes inside a subtree that comes from the layout cache grow by a rounding step on many calculateLayout calls, and keep growing. In a UI where one node changes size every frame (a progress bar), text boxes grow until the text, centered in its box, drifts onto the next line.

Repro with yoga-layout 3.2.1 on Node 26 (macOS arm64):

// yoga-layout 3.2.1: measured nodes in a cached subtree grow on every layout pass.
import Yoga, {Edge, FlexDirection, PositionType} from 'yoga-layout';

const config = Yoga.Config.create();
config.setPointScaleFactor(100); // round to 0.01 layout units

const root = Yoga.Node.create(config);
root.setWidth(620);
root.setPadding(Edge.All, 24.3);

// Changing this sibling's width relays out the root, while the list
// below is served from the layout cache.
const bar = Yoga.Node.create(config);
bar.setHeight(8);
bar.setWidth(10);
root.insertChild(bar, 0);

const spacer = Yoga.Node.create(config);
spacer.setHeight(517.37);
root.insertChild(spacer, 1);

const anchor = Yoga.Node.create(config);
anchor.setHeight(50.8);
root.insertChild(anchor, 2);

const list = Yoga.Node.create(config);
list.setPositionType(PositionType.Absolute);
list.setPosition(Edge.Bottom, '110%');
anchor.insertChild(list, 0);

const labels = [];
for (let i = 0; i < 30; i++) {
  const row = Yoga.Node.create(config);
  row.setFlexDirection(FlexDirection.Row);
  row.setPadding(Edge.Vertical, 10);
  const label = Yoga.Node.create(config);
  label.setMeasureFunc(() => ({width: 70.37, height: 28.8}));
  row.insertChild(label, 0);
  list.insertChild(row, i);
  labels.push(label);
}

// Each label measures 28.8 tall; print the ones whose layout height grew.
const grown = () =>
  labels
    .map((label, i) => [i + 1, label.getComputedHeight()])
    .filter(([, h]) => h > 28.8 + 0.005)
    .map(([i, h]) => `#${i}=${h.toFixed(2)}`)
    .join(' ') || '(none)';

root.calculateLayout(undefined, undefined);
console.log('pass 0   ', grown());
for (let pass = 1; pass <= 600; pass++) {
  bar.setWidth(10 + (pass % 50));
  root.calculateLayout(undefined, undefined);
  if ([1, 10, 100, 600].includes(pass))
    console.log(`pass ${pass}`.padEnd(9), grown());
}

Output:

pass 0    (none)
pass 1    #1=28.81 #2=28.81 #3=28.81 #4=28.81 #5=28.81 #6=28.81 #7=28.81 #8=28.81 #9=28.81 #10=28.81 #11=28.81 #12=28.81 #13=28.81 #14=28.81 #15=28.81 #16=28.81 #17=28.81 #19=28.81 #20=28.81 #21=28.81 #22=28.81 #23=28.81 #24=28.81 #25=28.81 #26=28.81 #27=28.81 #28=28.81 #29=28.81 #30=28.81
pass 10   #1=28.82 #2=28.83 #3=28.85 #4=28.90 #5=28.90 #6=28.82 #7=28.83 #8=28.90 #9=28.90 #10=28.90 #11=28.90 #12=28.82 #13=28.81 #14=28.90 #15=28.86 #16=28.86 #17=28.82 #19=28.81 #20=28.82 #21=28.86 #22=28.86 #23=28.81 #24=28.86 #25=28.90 #26=28.90 #27=28.90 #28=28.81 #29=28.90 #30=28.92
pass 100  #1=28.82 #2=28.83 #3=28.85 #4=29.00 #5=29.00 #6=28.82 #7=28.83 #8=29.00 #9=29.00 #10=29.00 #11=29.00 #12=28.82 #13=28.81 #14=29.80 #15=28.86 #16=28.86 #17=28.82 #19=28.81 #20=28.82 #21=28.86 #22=28.86 #23=28.81 #24=28.86 #25=29.00 #26=29.00 #27=29.00 #28=28.81 #29=29.00 #30=29.99
pass 600  #1=28.82 #2=28.83 #3=28.85 #4=29.00 #5=29.00 #6=28.82 #7=28.83 #8=29.00 #9=29.00 #10=29.00 #11=29.00 #12=28.82 #13=28.81 #14=34.80 #15=28.86 #16=28.86 #17=28.82 #19=28.81 #20=28.82 #21=28.86 #22=28.86 #23=28.81 #24=28.86 #25=29.00 #26=29.00 #27=29.00 #28=28.81 #29=29.00 #30=35.95

Every label measures 28.8 tall and nothing in the list changes between passes. With setPointScaleFactor(0) all heights stay at 28.8.

My guess is that the pixel-grid rounding runs again over the cached subtree, which still holds the previous pass's rounded values. For measured nodes the top edge is floored and the bottom edge ceiled, so where float32 storage leaves a small residue in the absolute position, the height goes up one more step each time. Nodes without a measure function keep their size.

Found through @pmndrs/uikit, which sets a point scale factor of 100 (layout rounded to 0.01 units).

Lenguaje dominante
C++
Estrellas
18.9k
Forks
1.6k
Merge medio
1 d 31 min
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/yoga

Todos los issues de react/yoga

Issues similares

Más issues de C++

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.