macOS Firefoxで /macOS が常時重い

[eai04191]

macOSのFirefoxで https://azookey.com/macOS を開くと、ページ最上部のidle状態で常時重く、Compositorが約20fpsに張り付く。スクロールするとフレームレートが回復する。Chromeでは発生しない。

環境

• Firefox 150.0.3
• macOS 15.7.4

再現手順

1. macOSのFirefoxで https://azookey.com/macOS を開く
2. about:configでgfx.webrender.debug.profilerをtrueにしてFPSオーバーレイを表示
3. ページ最上部 (scrollY=0) のidle状態でFPSを観察 → 約20fps
4. 少しスクロール → 60fps付近に回復

プロファイル

https://share.firefox.dev/42ETa92

5秒idle → スクロール → 5秒idleの計測。Compositorフレームを1秒ウィンドウで集計:

経過秒	状態	frames/s	avg frame time	drawCalls/frame	picture cache invalidations/frame
0–4s	scrollY=0でidle	20–21	47ms	304	18
5–6s	スクロール中	45–59	8–12ms	150–190	14–17
7–9s	スクロール後idle	59–60	3–5ms	190	9

スクロール後はavg 3ms/frame (GPU実質idle) まで落ちる。スクロール後の状態ではfixedのmini-header、feature-card × 3、footerがbackdrop-filterを持つ状態で同時に表示されているが60fps出ているため、backdrop-filter単独の負荷は要因ではない。

該当範囲のサンプル統計 (scrollY=0のidle時):

• Rendererスレッドのサンプル大半がiokit_user_client_trap (GPU待ち)
• メインスレッドのStylesは負荷なし
• Render reason ANIMATED_PROPERTYが支配的

GPU律速で、引き金はhero内で常時稼働している.neural-gridのCSSアニメーション。

切り分け

DevToolsのStyle EditorでscrollY=0のidle状態に以下を1つずつ適用してFPSを計測した。

検証	適用内容	FPS
A	ベースライン	18
B	.neural-grid { animation: none !important }	60
C	mini-header / feature-card / footer等のbackdrop-filterを全削除	18
D	.neural-grid { will-change: transform !important }	18
E	.neural-gridのbackground-imageをsolid colorに置換	60
F	@keyframes neuralFlowからrotate(...)を削除 (translateのみ残す)	60

読み取れること:

• backdrop-filterは今回の症状に寄与していない (C、プロファイルのscroll後データとも整合)
• will-changeでレイヤpromotionを明示しても改善しない (D)
• rotateを抜く (F) またはradial-gradient背景を抜く (E) のどちらかで60fpsに戻る

.neural-gridのrotateを含むtransformアニメとradial-gradient背景の組み合わせで、毎フレームgradientの再評価が発生している挙動と一致する。

修正案

azooKey-site/src/views/Desktop.vue

Lines 163 to 167 in b67aebb

	@keyframes neuralFlow {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(30px, -30px) rotate(1deg); }
	66% { transform: translate(-20px, 20px) rotate(-1deg); }
	}

のkeyframesからrotate(...)を削除する。検証Fで60fpsに戻ることを確認済み。

@keyframes neuralFlow {
    0%,
    100% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(30px, -30px);
    }
    66% {
        transform: translate(-20px, 20px);
    }
}

回転角は元々±1degと微小なので、視覚的な差はほぼ出ないはず。

（このissueは主にclaude codeによって書かれました）