bug: iPad mini でステージ上の変数表示が低品質（ピクセル化・ギザギザ）になる

[takaokouji]

概要

iPad mini でステージ上の変数表示（値がピクセル化、角がギザギザ等）が低品質になる。リストでも発生する可能性あり。

再現手順（報告者による）

1. iPad mini をシミュレート
2. smalruby.app を開く
3. ステージサイズはデフォルトのまま
4. 変数を作成して表示する
5. プロジェクトをフルスクリーンにする
6. 変数表示を確認する

対応方針

まず Playwright で再現確認から始める。

関連

Feedback: smalruby/smalruby3-develop#86

[takaokouji]

調査結果

再現確認

環境	結果
Chromium (iPad mini エミュレーション 1133x744, DPR 2, touch, フルスクリーン)	再現せず — Chromium のコンポジタはスケール変更後に正しい解像度で再ラスタライズするため
WebKit headless (同条件, Safari と同エンジン)	スクリーンショットでは観測不可 — headless のスクリーンショットは撮影時に強制再ラスタライズされ、コンポジタ由来の劣化が写らない
実機 iPad (iOS Safari)	報告者環境。実機で確認する

再現スクリプト: tools/playwright-verify/repro-issue-726-monitor-quality.mjs

根本原因（構造的に特定）

報告の症状「pixelated value, jagged corners」が決定的:

1. packages/scratch-gui/src/components/monitor/monitor.css には 2018 年の upstream の Safari フリッカー対策ハックとして transform: translateZ(0) が 4 箇所 ある（.value ＝値バブル、.large-value、.slider、.list-row）。upstream コミット 15d6506c78 / 8f736c404d / 95b9de6821（Safari 11 時代）
2. フルスクリーン時、モニターは .monitor-list-scaler の transform: scale(~2.1) で拡大される（iPad mini: 480→1024px で scale≈2.13、stageSizeToTransform）
3. translateZ(0) はコンポジタレイヤーを生成し、iOS Safari はレイヤーをスケール前のサイズでラスタライズしたビットマップを拡大表示する → 値バブルの文字がピクセル化・角丸がギザギザになる
4. さらに .monitor-container は overflow: hidden + 角丸のため、コンポジット化した子を持つとコンテナごとレイヤー化され、モニター全体が低品質になる

報告にある「value がピクセル化」は、まさに translateZ(0) を持つ .value 要素そのもの。

修正設計

方針: translateZ(0) ハックの除去（Option A）

monitor.css の 4 箇所の transform: translateZ(0) を削除する（upstream ファイルのためマーカーコメントで明示）。コンポジタレイヤーが無くなれば、コンテンツは親のラスタライズに full transform 適用で描画されシャープになる。

• 利点: 最小修正。ドラッグ座標系（react-draggable は scale prop 未使用）に影響なし
• リスク: このハックが直していた「Safari でのモニター値のフリッカー」（2018 年・Safari 11 時代の flex 実装起因）が再発する可能性 → 実機確認で検出。再発した場合は Option B（scale ≠ 1 のときのみ translateZ を無効化）に切り替える

Affected Files

• packages/scratch-gui/src/components/monitor/monitor.css — translateZ(0) 4 箇所をマーカー付きで削除（upstream ファイル）
• .claude/rules/scratch-gui/smalruby-markers.md — マーカー一覧更新
• packages/scratch-gui/test/integration/ — モニターの .value 等が translateZ レイヤーを作らないことの回帰テスト
• tools/playwright-verify/ — 検証スクリプト

Definition of Done

• 実機 iPad/iPhone で修正前の再現を確認（本番 smalruby.app）
• ユニット/integration テスト pass
• lint pass
• CI green
• Playwright（Chromium/WebKit）でフルスクリーン時のモニター表示にリグレッションなし（表示・位置）
• 実機 iPad/iPhone 確認:
  • フルスクリーンで変数表示がシャープになる（修正前はピクセル化）
  • 変数値を高速更新（forever ループ）してもフリッカーしない（ハック除去のリグレッション確認）
  • スライダー表示・大きな表示・リスト表示も同様に確認

[takaokouji]

結論: 修正せずクローズ（再現せず / Smalruby 固有ではない）

実機・エミュレーションでの確認の結果、対応しないと判断した。

確認結果

環境	結果
Chromium (iPad mini エミュレーション, DPR 2, フルスクリーン)	再現せず
WebKit headless	観測不可（headless は撮影時に再ラスタライズされ劣化が写らない）
実機 iPad (iOS Safari, 本番 smalruby.app)	気になる劣化なし
upstream scratch.mit.edu	同一の表示品質（= Smalruby 固有ではない）

判断理由

1. 実機で再現しない — 報告の再現手順 step 1 が「Simulate a iPad mini」であり、報告者はシミュレータ／devtools のデバイスエミュレーションを見ていた可能性が高い。シミュレータは非整数スケールで中間ラスタライズすることがあり、実機（DPR 2 整数倍、Safari が composited layer を contents-scale でデバイス解像度ラスタライズ）では起きないボケが出る。
2. upstream と完全に同一 — 仮に劣化があっても Scratch 3.0 のモニターを transform: scale で拡大する設計に由来する upstream 共通挙動で、Smalruby が作り込んだ問題ではない。
3. 報告者本人も "Not that big of an issue" と評価。

当初検討した monitor.css の translateZ(0) ハック除去は、実機で確認できる劣化が無い以上リターンが無く、upstream との乖離・Safari フリッカー再発のリスクだけが残るため見送る（upstream 追従コスト最小化の方針）。

将来、実機での明確な再現条件（端末・iOS バージョン・実機/シミュレータの別）を伴う報告があれば、その時に Option B（scale ≠ 1 のときのみ translateZ を無効化）を検討する。

再現スクリプトは tools/playwright-verify/repro-issue-726-monitor-quality.mjs に残す。