Rounding errors can accumulate and cause nodes to expand each time a layout is recomputed

[ickshonpe]

taffy version

0.3.10 and main 868b85d

What you did

use taffy::prelude::*;
use taffy::util::print_tree;

fn main() {
    let mut taffy = Taffy::new();

    let inner = taffy.new_leaf(Style { min_size: Size { width: length(300.), height: auto() }, ..Default::default() }).unwrap();
    let wrapper = taffy.new_with_children( 
        Style {
            size: Size { width: length(150.), height: auto() },
            justify_content: Some(JustifyContent::End),
            ..Default::default()
        }, 
        &[inner]
    ).unwrap();
    let outer = taffy.new_with_children( 
        Style {
            size: Size { width: percent(100.), height: auto() },            
            inset: Rect { left: length(1.5), right: auto(), top: auto(), bottom: auto() },
            ..Default::default()
        },
        &[wrapper]
    ).unwrap();
    let viewport =  taffy.new_with_children(
        Style { 
            size: Size { width: length(1920.),height: length(1080.) },
            ..Default::default()
        },
        &[outer]
    ).unwrap();
    for _ in 0..3 {
        taffy.mark_dirty(viewport).ok();
        taffy.compute_layout(viewport, Size::MAX_CONTENT).ok();
        print_tree(&taffy, viewport);
        println!();
    }
}

What went wrong

TREE
└──  FLEX [x: 0    y: 0    width: 1920 height: 1080] (NodeId(4294967300))
    └──  FLEX [x: 2    y: 0    width: 1920 height: 1080] (NodeId(4294967299))
        └──  FLEX [x: 0    y: 0    width: 150  height: 1080] (NodeId(4294967298))
            └──  LEAF [x: -150 y: 0    width: 301  height: 1080] (NodeId(4294967297))

TREE
└──  FLEX [x: 0    y: 0    width: 1920 height: 1080] (NodeId(4294967300))
    └──  FLEX [x: 2    y: 0    width: 1920 height: 1080] (NodeId(4294967299))
        └──  FLEX [x: 0    y: 0    width: 150  height: 1080] (NodeId(4294967298))
            └──  LEAF [x: -150 y: 0    width: 302  height: 1080] (NodeId(4294967297))

TREE
└──  FLEX [x: 0    y: 0    width: 1920 height: 1080] (NodeId(4294967300))
    └──  FLEX [x: 2    y: 0    width: 1920 height: 1080] (NodeId(4294967299))
        └──  FLEX [x: 0    y: 0    width: 150  height: 1080] (NodeId(4294967298))
            └──  LEAF [x: -150 y: 0    width: 303  height: 1080] (NodeId(4294967297))

The width of the inner node expands by a pixel each time the layout is recomputed.

Additional information

This only happens when rounding is enabled.

[ickshonpe]

The problem seems to be how rust rounds ties away from zero. So here the node ranges horizontally from -148.5 to 151.5 and then after rounding away from zero the range becomes -149 to 152, increasing the width by 1.

Replacing the round function in round_layout with

fn round_half_up(
    value: f32,
) -> f32 {
    if 0. < value ||  value.trunc() - value != 0.5 {
        value.round()
    } else {
        value.ceil()
    }
}

seems to work, but I'm not sure about it.

[nicoburns]

Huh. This is bizarre. Relayouts should not in any way depend on rounded values from previous layout runs. I'm thinking this is really a caching issue (using stale rounded values) rather than a rounding issue. I think we might need to:

• Persist unrounded values between layout runs (we ought to already have this in the cache, so possibly we can grab them from there).
• Perform rounding on every node each time (or have smarter cache invalidation for recomputing rounding).

But that's just a guess at this point. I will need to investigate properly.

[nicoburns]

Ah, so layout doesn't take rounded values as an input. But the rounding process itself does. I think the fix for this will indeed be to store unrounded values in addition to rounded values. We could also look at changing the rounding algorithm to round_ties_up, but I think that decision can be made purely on the basis of desired rounding behaviour rather than as a bug fix.