firefox中transition延迟为0时必须带单位（如0s），否则整条声明无效；height: auto等不可计算值无法过渡；颜色空间差异和transform布局脱节也会引发视觉尺寸偏差。
transition中0延迟必须写单位
Firefox对transition语法解析更严格，当延迟时间为0时，若没带单位（如0s或0ms），整条声明会被视为无效，开发者工具里该行直接划掉，动画完全不触发。Chrome可能宽容处理，但Firefox不会。
- 错误写法：
transition: width 0.3s ease 0;→ Firefox静默失效 - 正确写法：
transition: width 0.3s ease 0s;或transition: width 0.3s ease 0ms; - 这个规则适用于所有四个参数，但只有
delay为0时最容易漏掉单位
尺寸变化必须真实可计算
Firefox对“值是否真变了”的判断更敏感，尤其在涉及盒模型尺寸时。常见问题不是它不支持过渡，而是起点和终点无法构成有效插值路径。
-
height: auto无法过渡 —— 浏览器无法算出终点高度，Firefox直接跳过；改用max-height: 0 → max-height: 500px模拟 -
width: 100% → width: fit-content不触发 —— 后者不是长度值，无单位可插值；统一用px或rem - 用JS设置样式后立即触发transition，需确保两次
getComputedStyle读取之间有重排机会，否则Firefox可能合并为“无变化”
transform缩放导致的视觉尺寸错位
如果你用transform: scale()做尺寸变化并配合transition，Firefox不会改变盒模型，但视觉缩放会与父容器布局脱节，造成“尺寸偏差”假象。
- 缩放后右边/底部留白？不是transition问题，是
transform本身不占空间 —— 需手动补偿：width: calc(100% / 0.8); transform-origin: top left; - 避免混用
zoom和transform：Firefox根本不支持zoom，写了也无效，还可能干扰其他声明 - 缩放元素内嵌套flex子项时，记得给子项加
min-width: 0，否则Firefox下flex: 1不生效，进一步放大错位感
颜色与渐变过渡引发的尺寸感知偏差
Firefox用传统色彩空间解析linear-gradient，和Chrome的sRGB插值路径不同，可能导致边框、阴影等依赖颜色过渡的区域渲染偏移，视觉上像“尺寸不对”。这不是box model问题，但用户感知就是“变宽了”或“收缩了”。
- 禁用
hsl()、lab()等新色函数，统一用#RRGGBB或rgb(r, g, b) - 渐变边框动画慎用
@property：Firefox不支持，var(--angle)没fallback会导致整个background声明失效，边框消失 → 必须写var(--angle, 0deg) - 如果用
border-image配渐变，Firefox对border-image-slice的默认值处理更保守，建议显式设border-image-slice: 1;
transition，其实问题出在transform坐标系分离、auto值不可插值、或color space导致的视觉膨胀/收缩——这些在Firefox里暴露得更早、更彻底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
