【免费下载链接】gridbugsA curated list of Grid interop issues项目地址https://gitcode.com/gh_mirrors/gr/gridbugs点击查看免费下载GridBugs 是一个持续收录 CSS Grid 布局浏览器 Bug 与互操作性问题的精选清单A curated list of Grid interop issues。这篇文章带你复盘它的第 11 条为什么在 Mac 版 Chrome 里作为 Grid 子项的 textarea 一输入文字宽度就会莫名塌缩为 0以及如何排查和规避这个坑。GridBugs 是什么一份社区驱动的 Grid 浏览器 Bug 精选清单GridBugs 受 Flexbugs 项目启发目标是把 CSS Grid 各浏览器之间的**不一致行为interop issues**记录下来方便开发者快速判断这是浏览器的问题还是我代码的问题。清单目前收录了 14 条 Bug完整目录可以查看 README.md#L16-L29前 9 条多与轨道尺寸、repeat()语法、grid-gap百分比等规范实现不完整有关第 10 条是部分 HTML 元素无法作为 Grid 容器第 11 条就是本文主角textarea 作为 Grid 子项时宽度塌缩为 0第 13、14 条涉及百分比 padding/margin 的互操作性差异、fit-content轨道被意外拉伸等项目定位很清晰——它不是 CSS Grid 技术支持而是要求你先自己用**最小测试用例Reduced Test Case**确认问题确实不在你的代码里再来登记具体约定见 README.md#L9-L11。Bug 11 现场还原textarea 一输入文字宽度就变成 0先看这条 Bug 的基本档案原始记录在 README.md#L268-L287项目说明 现象textarea 作为 Grid 子项一旦输入文字宽度就塌缩为 0️ 影响浏览器仅 Chrome且只在 macOSOS X系统上出现 追踪问题Chromium 官方缺陷库 Issue #727076 官方 Demo项目专门挂了独立测试页原因见下文iframe 陷阱也就是说同样的页面代码Windows 或 Linux 上的 Chrome 一切正常唯独 Mac 版 Chrome 的 textarea 会字打进去、框缩没了非常反直觉。为什么 CodePen 里复现不出来iframe 陷阱提醒这是这条 Bug 最值得新手注意的细节。README 原文提到官方测试页之所以直接链接到 Chromium 缺陷里的独立测试页是因为CodePen 以 iframe 方式加载时这个 Bug 根本不会触发。⚠️这给我们两个实用提醒在线编辑器可能掩盖Bugiframe 环境、加载时序不同都会改变渲染行为。遇到诡异问题先在本地一个干净的 HTML 页面里验证。测试环境要贴近真实环境真实站点里的复现路径往往和演示环境不一致。textarea 宽度塌缩为 0 时的 3 步排查与规避写法如果你在项目里遇到了Grid 中 textarea 显示不出来的情况可以按下面三步走。第 1 步用最小测试用例确认责任方把页面裁剪到只剩 Grid 容器 一个 textarea 最简样式分别在 ChromeMac、Firefox、Windows Chrome 上各测一遍。如果所有环境都正常→ 大概率是你的样式问题轨道尺寸、overflow、padding 等回到自己代码里查如果只有 Mac 版 Chrome 塌缩→ 命中 GridBugs 第 11 条属于已知浏览器 Bug这一步的价值在于避免把浏览器 Bug 当成自己的代码 Bug 反复空耗时间。第 2 步核对环境确认是否命中该 Bug三个条件同时满足才中招Chrome macOS textarea 是直接的 Grid 子项。缺任何一个都不复现这也是为什么同事的电脑正常、你的电脑出问题时优先问一句系统版本。第 3 步显式给 textarea 一个兜底宽度推荐写法最稳妥的规避方式是不要让 textarea 依赖自动宽度计算显式给它撑开textarea { width: 100%; /* 撑满所在轨道避免宽度塌缩为 0 */ }同理给轨道一个明确尺寸而非完全交给auto推算也能减少此类不确定性。同类坑延伸阅读Grid 容器/子项的其他经典 Bug如果你对Grid 里某些元素行为诡异这个话题感兴趣第 11 条和下面两条关联度最高第 10 条部分 HTML 元素无法成为 Grid 容器——Chrome及 Safari 10里fieldset加display: grid不生效button只有 Firefox 能当 Grid 容器。详见 README.md#L245-L266第 13 条百分比 padding/margin 在 Firefox 与 Chrome 之间的解析方式不一致规范明确建议少用第 14 条Chrome/WebKit 中fit-content轨道会被意外拉伸可用justify-content: start规避这些条目共同说明一件事Grid 虽然整体互通性很好但表单控件、固有尺寸元素在 Grid 轨道里的表现仍是最容易踩坑的角落。关键要点速览要点一句话总结 Bug 本质Mac 版 Chrome 中Grid 子项 textarea 输入文字后宽度塌缩为 0 排查核心先用最小测试用例排除自身代码再核对浏览器 操作系统 避坑提醒CodePen 等 iframe 环境可能掩盖该 Bug务必用真实页面验证✅ 规避方案给 textarea 显式设置width: 100%或兜底min-width 资料来源项目说明 README.md、授权协议 LICENSE下次再遇到 Grid 布局里元素凭空消失的怪事记得翻一翻这份社区 Bug 清单——先确认是不是已知问题能省下大把排查时间。赞分享【免费下载链接】gridbugsA curated list of Grid interop issues项目地址https://gitcode.com/gh_mirrors/gr/gridbugs点击查看免费下载相关推荐rsuite Textarea 的 resize 属性精细控制多行文本域的拖拽缩放行为rsuite Textarea 的 resize 属性精细控制多行文本域的拖拽缩放行为 多行文本域 textarea 在表单中承担着大量输入任务而能前端UI组件YCBlogs 技术笔记Android 获取 View 宽高属性的完整指南从为何为 0到四种可靠方案YCBlogs 技术笔记Android 获取 View 宽高属性的完整指南从为何为 0到四种可靠方案 本文基于 YCBlogs 仓库中 android教程技术博客文档小白羊网盘阿里云盘用户的终极选择5大核心优势深度解析小白羊网盘阿里云盘用户的终极选择5大核心优势深度解析 小白羊网盘是一款基于阿里云盘开发的高效管理工具为用户提供了远超官方客户端的使用体验。无论是文件管理、桌面应用AI 应用音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考