firefox grid列数异常是因对auto-fit和minmax()可用空间判定更保守，会将父容器padding、border等计入不可用空间，导致列数减少；需显式设width: 100%、图片加max-width: 100%、禁用grid-template-areas改用数字线定位、统一用gap合写、避免overflow: hidden裁剪gap、动画加translate3d(0,0,0)及双写@keyframes和animation规则。
Firefox里Grid列数异常，Chrome却正常
这不是代码写错，而是Firefox对auto-fit和minmax()的可用空间判定更保守。它会把父容器的padding、border甚至未同步的box-sizing都算进“不可用空间”，导致列数比预期少一列，留下明显空隙。
- 给
grid容器显式加width: 100%，哪怕父级已撑满——Firefox需要这个锚点重算网格轨道 - 避免子项设
width（尤其是固定值），否则Firefox优先按固定宽分配，直接跳过1fr逻辑 - 图片类内容必须加
img { max-width: 100%; height: auto; }，否则原始尺寸参与计算，干扰minmax()判断
Safari显示正常但Firefox错位，而Chrome也正常
这种情况大概率不是Firefox的问题，而是你误用了Safari旧版（iOS 15.4前）才支持的语法，结果在Firefox里被当作无效规则忽略。比如grid-template-areas或grid-column: span 2，Firefox其实完全支持，但如果你的CSS里混进了Safari私有行为（如依赖overflow: hidden来“修复”gap），Firefox不会照单全收。
- 禁用
grid-template-areas，改用数字线定位：grid-column: 1 / 3比grid-column: span 2更稳 - 把
row-gap和column-gap全部换成gap合写——Safari旧版只认gap，Firefox则无差别支持 - 检查父容器是否设了
overflow: hidden：它会让gap推挤出界后被裁剪，看起来像gap“失效”，实则是渲染溢出
Chrome动画流畅，Firefox卡顿，但Grid结构没变
Firefox对GPU加速触发更谨慎，尤其在transform仅含translateX这类二维操作时，容易回退到CPU渲染，帧率骤降。这不是性能差，是合成策略不同。
- 把
transform: translateZ(0)换成transform: translate3d(0, 0, 0)，Firefox对后者识别更稳定 -
will-change: transform只在动画开始前1帧用JS设置，结束后立刻设回auto，否则持续占纹理内存 - 移除动画元素或其父级上的
display: contents，它会破坏盒模型，让Firefox无法正确计算帧边界
@keyframes在Firefox不执行，Chrome却动得好好的
Firefox（Gecko）对标准@keyframes的解析比Chrome严格得多，漏一个@-moz-keyframes前缀，整段动画就静默失效——连报错都不会抛。
- 必须成对声明：
@keyframes slideIn和@-moz-keyframes slideIn，内容一字不差 - 动画调用也要双写：
animation: slideIn 0.3s;+-moz-animation: slideIn 0.3s; - 别在
@keyframes里用CSS变量（如var(--color)），Firefox 91之前不支持；名称别用连字符（fade-in会静默失败），改用fade_in或fadeIn
animation属性是否为none，比猜更准。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
