移动端 grid 中 sticky 失效需设 grid 容器为滚动上下文：加 overflow-y: auto 和 height/max-height 约束，并配 -webkit-overflow-scrolling: touch；避免在滚动区用 transform；推荐 grid-template-rows: auto minmax(0, 1fr)；vh 错乱可用 100dvh 或 js 动态 --safe-height。
移动端 CSS Grid 布局中，position: sticky 头部失效怎么办
常见现象是：用 grid-template-areas 划分了 "header content"，给 header 加了 position: sticky; top: 0，但在 iOS Safari 或部分安卓 WebView 里完全不粘住。
根本原因不是 Grid 本身不支持 sticky，而是 sticky 的生效依赖「最近的滚动容器」——而默认情况下，Grid 容器自身不会产生滚动上下文，内容溢出时滚动的是其父容器（比如 body），导致 sticky 找不到锚点。
- 必须显式让 Grid 容器成为滚动容器：给它加
overflow-y: auto或scroll - 同时确保该容器有明确高度约束（如
height: 100vh、max-height: 100vh），否则overflow不生效 - iOS Safari 对
sticky在 flex/grid 子项中的兼容性更敏感，建议配合-webkit-overflow-scrolling: touch（仅需在滚动容器上）
main {
display: grid;
grid-template-areas: "header" "content";
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
header { grid-area: header; position: sticky; top: 0; }
content { grid-area: content; }
Grid 内容区滚动时，如何避免 transform 或 scale 导致的渲染错位
很多移动端 UI 会用 transform: scale(0.95) 模拟「内凹」效果，或用 transform: translateZ(0) 强制 GPU 加速。但一旦内容区用了 Grid + 滚动，这些 transform 极易引发 iOS 上的滚动卡顿、fixed 元素跳动、甚至 sticky 失效。
本质是：iOS WebKit 对含有 transform 的滚动容器，会禁用某些合成层优化，同时影响其子元素的定位上下文计算。
立即学习“前端免费学习笔记（深入）”；
- 优先用
scale作用于非滚动容器（比如整个body），而不是滚动区内部的 Grid 项 - 避免在滚动容器或其直接子项上使用
transform，尤其不要和position: sticky同级共存 - 如果必须启用 GPU 加速，改用
will-change: scroll-position（只在滚动容器上），比translateZ(0)更安全
minmax(0, 1fr) 和 minmax(min-content, 1fr) 在内容滚动场景下的行为差异
写 grid-template-rows: [header] auto [content] 1fr 看似合理，但当 content 区域内容极少时，1fr 仍会撑满剩余空间，导致底部留白；而用 minmax(0, 1fr) 可让它收缩到内容实际高度，但又保留弹性伸展能力。
关键区别在于：浏览器对 0 的解释是「无最小限制」，而 min-content 是「按内容自然尺寸算最小值」——后者在文字折行、图片加载中可能意外放大最小高度。
- 固定头部 + 可滚动内容区，推荐用
grid-template-rows: auto minmax(0, 1fr) - 若内容区有「加载中」占位图且高度不稳定，
minmax(0, 1fr)能防止布局抖动；minmax(min-content, 1fr)更适合图文混排且需保底高度的卡片流 - 注意：Safari 旧版本对
minmax(0, 1fr)支持不一致，可降级为minmax(auto, 1fr)（效果接近但非完全等价）
Android WebView 中，vh 单位在地址栏收起/弹出时回弹导致 Grid 高度错乱
用 height: 100vh 设 Grid 容器高度，在 Chrome for Android 上，地址栏隐藏后页面突然「拉长」，导致内容区被压缩甚至消失——这不是 Grid 的 bug，而是 vh 始终基于初始视口，不响应地址栏状态变化。
真实需求不是「视口高」，而是「设备可用屏幕高度」，所以得绕开 vh。
- 用 JS 动态写入
--safe-height: ${window.innerHeight}px，CSS 中用height: var(--safe-height) - 监听
resize事件更新变量（注意节流，避免频繁触发） - 更轻量方案：改用
100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 已支持，但低端 Android WebView 仍需 fallback
复杂点在于：不同系统、不同 WebView 版本对 dvh 的实现节奏不一，上线前必须真机测主流厂商的 APP 内嵌 WebView（尤其是微信、QQ、钉钉）。
