/** * Performance Debug CSS * アニメーションちらつき診断・無効化用 * * 使い方: * 1. に class="disable-animations" を追加してすべてのアニメーションを無効化 * 2. に class="highlight-repaints" を追加してリペイントを可視化 */ /* ================================================ * すべてのアニメーション・トランジションを無効化 * ================================================ */ body.disable-animations *, body.disable-animations *::before, body.disable-animations *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* ================================================ * リペイント検出用（点滅させて問題箇所を特定） * ================================================ */ body.highlight-repaints * { outline: 1px solid rgba(255, 0, 0, 0.2); } /* ================================================ * 個別アニメーション無効化オプション * ================================================ */ /* transitionのみ無効化 */ body.disable-transitions *, body.disable-transitions *::before, body.disable-transitions *::after { transition: none !important; } /* animationのみ無効化 */ body.disable-keyframe-animations *, body.disable-keyframe-animations *::before, body.disable-keyframe-animations *::after { animation: none !important; } /* transformのみ無効化 */ body.disable-transforms * { transform: none !important; } /* ================================================ * パフォーマンス最適化用の設定 * ================================================ */ body.optimize-performance { /* GPU アクセラレーションを強制 */ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } body.optimize-performance * { /* すべての要素で will-change を無効化（過度な最適化を防ぐ） */ will-change: auto !important; } /* ================================================ * デバッグ情報表示 * ================================================ */ body.show-debug-info::before { content: "🔍 Debug Mode: Animations Disabled"; position: fixed; top: 0; left: 0; right: 0; background: #ff0000; color: #ffffff; padding: 5px; text-align: center; z-index: 999999; font-size: 12px; font-weight: bold; } /* ================================================ * よくある問題の修正 * ================================================ */ /* hover時のちらつき防止 */ body.fix-hover-flicker a, body.fix-hover-flicker button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* スクロール時のちらつき防止 */ body.fix-scroll-flicker { -webkit-overflow-scrolling: touch; } body.fix-scroll-flicker * { -webkit-transform: translateZ(0); transform: translateZ(0); }