Numeric 'scale' and 'aspectRatio' styles get a 'px' suffix (React treats them as unitless)
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 88/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
issue では packages/redact/src/dom/dom.ts の UNITLESS_STYLE が示されています。そのリストを読み、数値のインラインスタイル値がどのようにシリアライズされるか確認してください。次に、単位なしのスタイルを対象とするテストを探してください。指定された2つのプロパティを追加し、数値の scale と aspectRatio が px サフィックスなしでレンダリングされることを確認してください。
索引モデルが issue の本文から書いたものです。
説明
Summary
Redact adds px to a numeric scale or aspectRatio inline style. React does not. The result is invalid CSS, so the browser ignores the declaration.
<span style={{ scale: 0.25, aspectRatio: 1.5 }} />
style.scale |
style.aspectRatio |
|
|---|---|---|
| React 19 | 0.25 |
1.5 |
| Redact 0.2.0 | 0.25px (ignored) |
1.5px (ignored) |
There is no error or warning. The element just renders without the scale or the aspect ratio. In our app, this silently broke an icon cross-fade animation (scale: visible ? 1 : 0.25) and a size preview box (aspectRatio: width / height).
Cause
UNITLESS_STYLE in packages/redact/src/dom/dom.ts does not contain scale or aspectRatio. React's unitless list (react-dom-bindings/src/shared/isUnitlessNumber.js) contains both.
Suggested fix
Add aspectRatio and scale to UNITLESS_STYLE.
React's list also contains vendor-prefixed names that UNITLESS_STYLE does not match, for example WebkitLineClamp, WebkitFlex, WebkitBoxFlex, MozBoxFlex, msFlex and msGridRow. A numeric WebkitLineClamp: 2 (a common pattern for multi-line truncation) probably has the same problem. I did not test the prefixed names.
Versions
@tanstack/redact0.2.0.UNITLESS_STYLEonmain(d56d87cb) has the same gap.- Compared against
react-dom19.3.0.
- 主要言語
- TypeScript
- スター
- 537
- フォーク
- 22
- 平均マージ
- 1時間 47分
- マージ済み PR（30日）
- 22
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
TanStack/redact のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 90/100
TanStack/redact#67 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
TanStack/redact#58 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
TanStack/redact の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
Northeastern-Electric-Racing/FinishLine#4660 ·
メンテナーはふだん 2 日以内に返信
-
BeOS .json missingオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
mihaip/infinite-mac#475 ·
-
Let TypeScript accept an initial object in ReactiveDict対応中かも @yograj-vijay-yadav が今日担当しました。 オープンbug good first issue help wanted workshop
難易度 2/5 1〜3時間 初心者へのやさしさ 92/100
meteor/meteor#14919 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 83/100
marmelab/atomic-crm#401 ·
メンテナーはふだん 1 日以内に返信
-
account: profile
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 5 日以内に返信