/* ========================================================= anti-wobble-ios.css — iPhone Safariの“ゆらゆら”/ズレ抑止全ページで読み込み推奨 --------------------------------------------------------- 方針： - 100vh問題 → 100dvh優先／%高さの採用 - 背景固定の禁止 - スクロール挙動の統一と横揺れ防止 - 入力時の自動ズーム抑止 - タップ強調の抑制 ========================================================= */ /* --- 基本リセット＆横スクロール封じ --- */ html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; overscroll-behavior: none; /* 端でのビヨン防止 */ scroll-behavior: auto; /* Safariでスムースが干渉するのを回避 */ -webkit-text-size-adjust: 100%; /* 自動拡大抑止 */ } /* タップ時のハイライト除去＆意図しないジェスチャ抑制 */ * { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 画像/埋め込み要素のレイアウト安定化 */ img, video, canvas, iframe { display: block; max-width: 100%; } /* --- 100vh対策：セクションの最低高さは dVH を優先 --- */ /* 使いどころ：ヒーローや全画面セクションに .section-viewport を付与 */ .section-viewport { min-height: 100vh; /* フォールバック */ } @supports (height: 100dvh) { .section-viewport { min-height: 100dvh; /* iOS16+ 安定 */ } } /* --- 背景固定は揺れやすいので一括で無効化 --- */ /* 固定背景を使っている要素があれば、クラスに付け替えてください */ .bg-fixed, [data-bg-fixed="true"] { background-attachment: scroll !important; } /* --- position: fixed 要素の揺れ緩和 ----------------------- */ /* 変換レイヤが揺れを誘発するので “強制3D化” を無効化 */ .fixed-clean, header, .site-header, .drawer, .drawer-backdrop, .fab, .sticky-cta { will-change: auto !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: none !important; /* もし translateZ(0) 等を付けていたら無効化 */ } /* --- ドロワー/モーダル表示中のスクロール抑止（CSS側） ---- */ /* JSでを付け外しする想定 */ body.nav-open, body.modal-open { position: fixed; inset: 0; /* top/right/bottom/left:0 */ width: 100%; overflow: hidden; } /* --- 独立スクロール領域の調整 ---------------------------- */ /* 必要な縦スクロールはこのクラスで包むと安定（例：モーダル本文など） */ .scroll-area { overflow-y: auto; -webkit-overflow-scrolling: touch; /* 慣性スクロールを許可 */ } /* --- 入力時の自動ズーム抑止（フォント16px以上） ----------- */ input, select, textarea { font-size: 16px; line-height: 1.4; } /* --- iOS特有のフォーカス拡大を更に抑える小技 ------------ */ input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], input[type="url"], input[type="password"] { -webkit-text-size-adjust: 100%; } /* --- ページ全体の微振動をさらに抑える微調整 --------------- */ html { /* iOSで稀に起きるズームっぽいブレを減らす */ transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- よくあるレイアウト起因の揺れ対策 ---------------------- */ /* 背景画像のサイズ変動や計算コストを下げる */ .bg-cover { background-size: cover; background-position: 50% 50%; } /* レイアウトシフト対策：画像に明示幅/高さをつけない場合の保険 */ img { height: auto; } /* --- 安定用ユーティリティ ------------------------------- */ /* 画面幅いっぱいに広がらせたい時にボックスの小数pxを切り捨て */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* 1) はみ出し根絶（横スクロール禁止） */ html, body { overflow-x: hidden; } * { box-sizing: border-box; } /* 2) 安全マージン（ノッチ対応） */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-left: constant(safe-area-inset-left); /* 旧iOS用 */ padding-right: constant(safe-area-inset-right); } /* 3) 100vwの副作用を抑える（満幅は100%に） */ .full-bleed, .page-hero, .site-header, header, footer { width: 100% !important; /* 100vw → 100% に置換 */ max-width: 100%; } /* 4) 埋め込み系のはみ出し防止 */ img, video, canvas, iframe { max-width: 100%; height: auto; display: block; } /* 5) 影・境界での1pxはみ出しに保険 */ .section, .container, .card, .btn { transform: translateZ(0); /* レイヤ安定化 */ backface-visibility: hidden; } /* 例）横いっぱい帯 */ .full-bleed { width: calc(var(--vw) * 100); }