transitionを書いたのにアニメーションしない、モーダルは閉じるときだけ効く、初回だけ効かない——原因は「display:noneからの表示では補間の開始値が存在しない」という一点にほぼ収束します。従来のrequestAnimationFrame二重呼び出しによる回避から、@starting-styleとtransition-behavior:allow-discreteを使う現在の正攻法まで、切り分けの順番・そのまま貼れるコード・原因を3分で特定するコンソールスニペットを実務手順で整理します。
見えているボタンが押せない——原因の大半は「透明な何かが上に乗っている」です。opacity:0 のオーバーレイは当たり判定が残る、visibility:hidden なら消える、::after が犯人のときDevToolsには親のdivしか出ない、負のマージンで重なった要素は position:relative を足した瞬間にクリックを奪う。この6ケースをChromium 141で実測し、犯人を30秒で特定する1行スニペットと犯人別の直し方をまとめました。
scroll-behavior: smooth を書いたのにページが一瞬で飛ぶ、scrollIntoView だけ滑らない、scrollTo の直後に scrollY を読むと古い値が返る——スムーススクロールのトラブルは「どの要素が実際にスクロールしているか」と「このプロパティは継承しない」の2点でほぼ説明がつきます。Chromium 141で30条件のスクロール位置をフレーム単位で実測し、効く条件・効かない条件・所要時間・割り込み時の挙動をまとめました。
追従ヘッダーやドロワーが画面に固定されず一緒に流れてしまう原因と直し方。祖先のtransform・filter・backdrop-filter・will-changeがfixedの包含ブロックを奪う仕組み、犯人を特定するコンソールスニペット、body直下への退避・dialog/Popoverまで。
アコーディオンやFAQの開閉がパッと切り替わるだけでアニメーションしない原因と直し方。height:autoが補間できない仕組み、max-heightの限界、grid-template-rows 0fr→1frの書き方と閉じきらない落とし穴、JSでscrollHeightを渡す方法、detailsの閉じアニメーションまで。
「目次から見出しをクリックしたら、その見出しが固定ヘッダーの裏に隠れて本文の途中から始まる」——追従ヘッダーを実装したサイトで必ず出るのがこ […]
「スマホでハンバーガーメニューを開くと、後ろのページがスルスル動いてしまう」「PCではモーダルを開いた瞬間にページ全体が横にガタッとずれる」 […]
「モーダルに z-index: 9999 を付けたのに、なぜか追従ヘッダーの下に潜る」「ドロワーだけ他の要素に負ける」——実装していて一番納 […]
