flex-wrap: wrap-reverse offsets items by the padding/border of the wrong cross-axis edge
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 72/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- cpp, javascript
調査の方向性
Start in CalculateLayout.cpp, where the issue says cross-axis lines are positioned from leading padding and border and wrap-reverse mirrors items across the border box. Trace the wrap-reverse positioning for row and column layouts, then compare computed child positions with the reproduction and the CSS Flexbox expectation. Done means asymmetric cross-axis padding and borders place items from the correct edge in both directions.
索引モデルが issue の本文から書いたものです。
説明
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
With flexWrap: Wrap.WrapReverse, the container's cross-axis padding and border are applied on the wrong side. Items are offset by the cross-start padding (top in a row) instead of the cross-end padding (bottom). When the two edges differ, every item is shifted by the difference.
import Yoga, {FlexDirection, Wrap, Edge} from 'yoga-layout';
const root = Yoga.Node.create();
root.setFlexDirection(FlexDirection.Row);
root.setFlexWrap(Wrap.WrapReverse);
root.setWidth(100);
root.setHeight(100);
root.setPadding(Edge.Bottom, 10);
const child = Yoga.Node.create();
child.setWidth(10);
child.setHeight(10);
root.insertChild(child, 0);
root.calculateLayout(undefined, undefined);
console.log(child.getComputedLayout().top);
Run with node repro.mjs on yoga-layout 3.2.1 (also reproduces on main at 41118bd via the C API with YGErrataNone, YGErrataClassic, and YGErrataAll).
Expected Behavior
child.getComputedLayout().top should be 80 (100 - 10 paddingBottom - 10 height), matching browsers and CSS Flexbox flex-wrap: wrap-reverse.
Actual Behavior
node repro.mjs prints 90 (the child sits flush against the bottom edge, ignoring paddingBottom: 10). Conversely, setting root.setPadding(Edge.Top, 10) instead of Edge.Bottom gives top: 80 instead of 90. The same swap happens with cross-axis borders and with column containers that have asymmetric left/right padding or border.
In CalculateLayout.cpp, lines are laid out starting from leadingPaddingAndBorderCross, and the wrap-reverse pass mirrors each item with measuredDimension(cross) - position - size across the full border box rather than adjusting for computeFlexStartPaddingAndBorder(cross) - computeFlexEndPaddingAndBorder(cross).
Link to Code
Credit: https://ucsbplse.github.io/
- 主要言語
- C++
- スター
- 18.9k
- フォーク
- 1.6k
- 平均マージ
- 17時間 9分
- マージ済み PR（30日）
- 13
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react/yoga のほかの issue
-
Under FMA contraction, an item that shrinks exactly to its min-width is laid out at its flex basisオープン
難易度 4/5 3〜5日 初心者へのやさしさ 58/100
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
A child pinned with bottom: 0 can end a pixel above its parent's bottom after pixel rounding対応中かも @Pduhard が 5 日前に担当しました。 オープン
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 25/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
メンテナーはふだん 1 日以内に返信
似ている issue
-
backlog
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
EchoTools/nevr-runtime#2385 ·
メンテナーはふだん 1 日以内に返信
-
type:bug
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
tensorflow/tflite-micro#3995 ·
メンテナーはふだん 1 日以内に返信
-
CPU update 1.31xオープンspeed-report
難易度 1/5 1時間未満 初心者へのやさしさ 75/100
mw00/project-maya#961 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
not for AI lovers
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信