#优质博文 #CSS #前端 #坑
sticky 踩坑大全（
The Weird Parts of position: sticky

AI 摘要：本文详细讲解了 CSS 中 position: sticky 的工作原理及常见失效原因。作者通过多个代码示例展示了粘性定位受容器尺寸、父元素溢出属性、Flex/Grid 对齐方式等多重因素影响的微妙机制，并结合实际开发经验提供了解决思路：理解“包含块”(containing block) 与 align-self 的行为是调试 sticky 效果的关键。文章最后提出通过合理设置元素尺寸与滚动策略，可以避免粘性元素“失灵”或“溢出”的问题。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 粘性定位基础与预期行为
• 简介 position: sticky 的作用：元素在滚动到指定位置后固定。
• 通过最简示例展示 sticky top-0 的典型效果。
• 提醒常见误区：overflow: hidden 会阻断粘性效果。

2. 当事情出错时：粘性元素尺寸与容器关系
• 若粘性元素高度超过滚动容器，粘性效果部分失效。
• 浏览器会强制展示完整内容，导致“脱粘”现象。
• 实战提示：检查粘性元素与滚动容器的尺寸匹配。

3. 失效原因二：粘性元素的包含上下文过小
• 引用 CSS 规范，解释“粘性视口矩形”(sticky view rectangle) 概念。
• 说明粘性约束受到父容器边界限制，不能“突破”祖先容器。
• 举例当粘性元素嵌套于非滚动父层时如何导致“无法粘住”。

4. Flex / Grid 子元素场景下的典型陷阱
• Flex 子元素默认 align-self: stretch 会撑满交叉轴，破坏粘性条件。
• 解法：将父级和粘性元素设为 self-start，避免强制拉伸。
• 讲解 Grid 布局中相同现象与对应修复思路。

5. 优化方案与进阶技巧
• 若导航面板内容过长，可通过 max-height + overflow: auto 实现内部滚动。
• 结合实际项目经验，推荐为容器加 padding 时考虑剩余高度计算。
• 通过 CSS 变量或逻辑视口单位（如 100dvh）提升布局稳定性。

6. 总结与思考
• position: sticky 核心原则：不能突破容器边界、必须在正确的滚动上下文中。
• align-self 和容器尺寸管理是让粘性布局正常工作的关键。
• 理解规范、调试实际场景，是掌握 sticky 行为的根本。

author Chris Coyier

Frontend Masters

The Weird Parts of position: sticky;

Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.

#碎碎念 #坑
今日帮实习生看的一个 bug，踩的小坑，本地局域网真机调试的时候一直会报错 TypeError: crypto.randomUUID is not a function ，localhost 没有，线上也没有，是 web-llm 库用到的。

查到的原因是：crypto.randomUUID() 是 Web Crypto API 的一部分，仅在安全上下文（HTTPS）下可用。localhost 被视为安全来源，即使没有 HTTPS 也能使用该 API；但对于其他自定义域名，必须启用 HTTPS。

像这种情况一般需要解决么（陷入沉思）

StackOverflow | TypeError: crypto.randomUUID is not a function

翻到另外一个：StackOverflow | How do I create a GUID / UUID?

很好，群友说 Next 自带！
https://nextjs.org/docs/app/api-reference/cli/next#using-https-during-development

cosine - 前端人の日常频道

#碎碎念 #移动端适配 #坑 我恨 Safari（咬牙切齿） 当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常 我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity…

#碎碎念 #坑
🤡 败了，经过几天的奋斗认清事实了，不用 svg 了直接定位了，svg + foreignObject + transform + 一些 xy 魔法在 Safari 里就是古神一般的存在，同样的代码在 Chrome 里 work 的非常自然，打开 Safari 的时候定位全乱是多么痛的体验，调试起来也是完
折磨。换了 dom + 绝对定位实现完整个人都舒心了无比流畅。

为什么，为什么这个定位会偏，为什么安卓上不会偏（选中）（看size看坐标）（对的啊）

有空想办法整整最小复现看看。

#碎碎念 #移动端适配 #坑
我恨 Safari（咬牙切齿）
当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常

我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity 后，它就按照预期定位了。调试这个问题花了我几个小时。

尝试将您的 foreignObjects 包裹在 group 元素中。我发现使用变换样式 foreignObjects 在 Safari 中效果不佳。

Sing with me Safari is the new IE！

啊！！！破问题害我挠头了一下午。

https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari

看着像是 09 年就发现了的问题，现在也没修。
https://bugs.webkit.org/show_bug.cgi?id=23113

#前端 #css #坑

踩了个小坑， th > tr 标签sticky时设置 border 会失效，设置 border-collapse: separate; 可解。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。


https://stackoverflow.com/questions/18679020/border-around-tr-element-doesnt-show

https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

ps: 好像还是不大对，border 在表格中的行为表现太怪了，有些时候，等晚点腾出手了总结一下

pps: tmd，我先伪元素解君愁了。

#碎碎念 #坑 #前端 #移动端适配 #响应式
又是因为没有 iphone 踩坑的每一天，安卓移动端 chrome，我的设备上滚动的时候没意识到 ios 的 safari 滚动的时候可视区域是会变化的（讲真这个逻辑我看着挺别扭的，在一些滚动驱动的网站里），用 ipad 侧拉出来模拟了一下然后发现 md，心情美丽///
之前就因为类似的问题把 vh 换成 dvh，又因为 dvh 出了问题换成了lvh 🤔
有什么更好更优雅的办法吗（对于 gsap 滚动驱动的网站）

ps: 好像也不能说是因为 ios 踩坑，有这种行为的浏览器还挺有挺多的，下拉变化可视区域隐藏工具栏，比如小米的系统自带浏览器、firefox，我常用的 chrome 和 kiwi 没有
pps: 找了安卓和 ios 好几个浏览器对比，感觉还是 safari 的影响范围最大。

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

掉落邀请码：H8mjgx1Rkw
之后我要减少发邀请码的频率去 follow 打赏一些创造者了喵~要是实在想要的在频道评论区问我吧~