search

DioxusLabs / taffy

A high performance rust-powered UI layout library
https://docs.rs/taffy
Other
2.06k stars 102 forks source link

Grid alignment issue with auto tracks #624

Closed akesson closed 6 months ago

akesson commented 6 months ago

taffy version

0.4.0

Platform

Rust

What you did

https://github.com/akesson/taffy-issue

What went wrong

taffy
nicoburns commented 6 months ago

I am able to reproduce this as a generated test with the following HTML snippet:

<div id="test-root" style="display: grid; width: 320px; height: 640px; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto 1fr; justify-content: start; justify-items: start;">
  <div style="background: #59c4f6; width: 100px; height: 50px; grid-row: 1 / span 2; grid-column: 1;"></div>
  <div style="background: #63c466; width: 40px; height: 30px; grid-row: 1 / span 2; grid-column: 2 / span 2;"></div>
  <div style="background: #feb43f; width: 120px; height: 20px; grid-row: 3 / span 1; grid-column: 1 / span 2;"></div>
</div>

If I am understanding correctly, then the blue (top left) and green (top right) nodes place correctly when the yellow (bottom) node is not present, but when the yellow node is added to the grid then the green node is incorrectly places 10px to the right of where it should be.

I haven't had a chance to dig into this in detail yet, but I strongly suspect that this is because the yellow node is causing the 1 grid column to be sized 10px too large. The yellow node is 20px larger than the first column, which if shared evenly across the two columns would make the first column 10px larger. This shouldn't happen because the second column (which it also spans) already has enough space for the extra width, but I suspect that there is bug causing it to happen anyway.

nicoburns commented 6 months ago

In investigating this further, I've noticed that your reproduction doesn't match your graphic. In your graphic the top-right node has a span of 1, whereas in the reproduction is has a span of 2. With a span of 1, Taffy matches Chrome's layout. With a span of 2 it doesn't, but I think this is undefined in the spec (it depends on which order you process nodes in, which isn't specified). We might still want to change this to match Chrome/Firefox, but I'm somewhat reluctant to make that change until I have more datapoints on what other browsers are implementing. My best guess at the moment is "grid order" (so depending on grid-auto-flow), but that's speculative.

nicoburns commented 6 months ago

I've opened https://github.com/w3c/csswg-drafts/issues/10095 to discuss this