Chrome 150 导致 Filament Badge 全宽拉伸故障分析

NightingaleWK

2026-07-02 (Updated: 2026-07-02)

技术分享

CSS, Chrome, Chromium, Filament, Laravel, 前端兼容性

Chrome 150 导致 Filament Badge 全宽拉伸故障分析

记录日期：2026 年 7 月 2 日
当前决策：暂不在项目中增加兼容代码，等待 Filament 官方修复后再升级验证。

一、问题摘要

Chrome 升级到 150 后，Filament 表格 TextColumn::badge() 和详情页 TextEntry::badge() 渲染的 badge 不再保持“内容多宽，badge 就多宽”，而是被横向拉伸到所在表格列或 Infolist 字段的可用宽度。

同一套项目代码经过交叉验证：

Chrome 129：显示正常。
Chromium 148：显示正常。
Chrome 150：稳定复现全宽拉伸。

问题不涉及业务数据、权限或状态计算，属于浏览器升级触发的前端布局兼容故障。

二、故障现象

2.1 表格中的颜色 badge 等宽拉伸

不同文字长度的 red、blue、orange、green 等 badge 被拉伸为相同宽度，宽度取决于“颜色”列，而不是文字内容。

2.2 表格中的计量单位 badge 被拉伸

单字计量单位“根”“卷”“个”同样占满所在列的内容区域。

2.3 多个业务状态 badge 同时受影响

巡检列表中的“状态”和“报告状态”均被拉伸，说明问题并不依赖具体字段、颜色或业务枚举。

2.4 部分移动端列表看起来正常

移动端工作台中的状态 badge 保持了内容宽度。

这并不代表移动端 Panel 不受影响。该列表的状态列使用了 grow(false)，外层布局本身会收缩，因此只是没有暴露拉伸效果。

2.5 移动端详情页仍然复现

移动端工单详情使用 TextEntry::badge()，badge 被拉伸到整行宽度，证明问题同时影响 admin 和 mobile Panel。

三、运行环境与关键证据

排查时项目的主要版本如下：

Filament：4.11.7
Laravel：12.62.0
Livewire：3.8.2
Tailwind CSS：4.1.18
PHP：8.5

Chrome 150 中采集到的计算样式为：

{
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36",
    "badgeWidth": 81.52083587646484,
    "wrapperWidth": 105.52083587646484,
    "badgeDisplay": "flex",
    "wrapperDisplay": "-webkit-box",
    "wrapperBoxAlign": "stretch"
}

关键点是：Filament 声明的 badge 是 inline-flex，但在 Chrome 150 中，其计算结果变成了 flex。

wrapperWidth 比 badgeWidth 多出的约 24px 来自表格文本容器左右各 12px 的内边距。badge 实际被拉伸到了父容器的内容区域宽度。

四、技术根因

4.1 Filament 的 badge 原本是内容宽度

Filament 的 badge 样式使用：

1
2
3

.fi-badge {
    display: inline-flex;
}

inline-flex 正常情况下会让 badge 按内容确定宽度。

4.2 TextColumn 和 TextEntry 外层使用全宽文本容器

Filament 表格与 Infolist 文本组件分别包含：

.fi-ta-text {
    width: 100%;
}

.fi-in-text {
    width: 100%;
}

外层占满表格列或 Infolist 字段本身是正常设计，并不等于 badge 应该占满外层。

4.3 未实际启用截断时，line-clamp 仍创建旧式 WebKit Box

Filament 对文本项应用了类似以下 Tailwind 工具：

1	line-clamp-(--line-clamp, none)

构建后会生成：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--line-clamp, none);
overflow: hidden;

即使没有设置具体截断行数，外层仍然进入旧式 -webkit-box 布局。

4.4 Chrome 150 将其子元素“块级化”

Chromium 在 2026 年 5 月 12 日合入了变更：

Ensure that display:-webkit-box blockifies its children.

变更地址：

Chromium Change 7836695

在 Chrome 150 中，作为 -webkit-box 子项的 span.fi-badge 被块级化：

1 2	声明值：inline-flex 计算值：flex

父级同时具有：

1	-webkit-box-align: stretch;

因此 badge 在横向交叉轴上被拉伸。

完整作用链如下：

TextColumn::badge() / TextEntry::badge()
                │
                ▼
       全宽文本项外层容器
                │
                ▼
 line-clamp 生成 display:-webkit-box
                │
                ▼
 Chrome 150 将 inline-flex 子项块级化为 flex
                │
                ▼
 -webkit-box-align:stretch 拉伸 badge
                │
                ▼
       badge 占满列或字段内容区域

五、为什么旧版本浏览器正常

Chrome 129 和 Chromium 148 中，.fi-badge 的计算样式仍然是 inline-flex，所以 badge 保持内容宽度。

Chrome 150 才包含上述 -webkit-box 子项块级化变更，因此出现了明确的版本分界：

1
2
3

Chrome 129：正常
Chromium 148：正常
Chrome 150：异常

这也解释了为什么最初使用 Selenium Chromium 148 验证时没有复现，而使用者实际升级到 Chrome 150 后能够稳定复现。

六、影响范围

截至 2026 年 7 月 2 日，对当前项目进行静态清点后发现：

Filament 用法	启用数量	是否可能受影响
`TextColumn::badge()`	24	是
`TextEntry::badge()`	22	是
Tab 计数 `badge()`	4	否

受影响能力包括但不限于：

表格状态 badge
表格颜色 badge
表格计量单位 badge
Infolist 状态 badge
admin Panel
mobile Panel

Tab、筛选计数、导航和动作中的普通 badge 不经过 fi-ta-text-item / fi-in-text-item 文本容器，因此不属于本次故障范围。

七、近期项目变更排除

排查期间重点核对了近期依赖和 CSS 变更：

7.1 FileViewEntry 插件

项目近期引入了 gheith3/filament-file-view-entry，并在主题中增加了插件 Blade 模板的 @source。

核查结果：

插件没有覆盖 .fi-badge、.fi-ta-text 或 .fi-in-text。
@source 只负责扫描模板中的 Tailwind 类，不会自动导入插件 CSS。
引入插件前后，构建产物中 badge 和文本项的相关规则一致。

因此该插件与本次故障无关。

7.2 Filament 4.11.7 升级

项目由 Filament 4.11.6 升级到 4.11.7，但两个版本相关的表格和 Infolist 文本 CSS 文件一致。

w-full 和 line-clamp-(--line-clamp,none) 从 Filament 4.0.0 起就已存在，并非近期新增。

7.3 Tailwind CSS

项目使用的 Tailwind CSS 4.1.18 在问题出现前后没有发生版本变化。

最终结论是：项目和 Filament 中长期存在的布局组合，被 Chrome 150 新的计算样式行为触发。

八、上游状态

Filament 社区已经报告了相同问题：

filamentphp/filament#20098：Badges stretch to full width in Chrome 150

截至 2026 年 7 月 2 日，该 issue 状态为：

Open
标签：bug、unconfirmed、medium priority
暂无维护者评论
暂无关联修复 PR
暂无里程碑

该 issue 报告环境为 Filament 5.6.7，而当前项目的 Filament 4.11.7 同样受影响，说明问题跨越 Filament 4 和 Filament 5，根源位于共用的文本组件 CSS 模式。

Chromium 也已经因为兼容性问题，在主分支撤销了 -webkit-box 子项块级化行为：

Chromium Change 8008779：Switch -webkit-box back to non-blockifying
关联 Chromium Bug：527483612

该撤销于 2026 年 6 月 29 日进入 Chromium 主分支，但 Chrome 150 已在 6 月 1 日切出分支。目前没有查到 Chrome 150 的回合记录，因此不能假定所有 Chrome 150 用户会立即恢复正常。

九、可选兼容方案

排查中验证过一个可行方向：仅重置含 badge 的 TextColumn / TextEntry 文本项外层 display，使 badge 不再是 -webkit-box 子项。

兼容规则应满足：

只作用于 fi-ta-text-item 和 fi-in-text-item 中的 badge 场景。
不全局修改 .fi-badge。
不影响 Tab、导航、动作和筛选计数 badge。
继续兼容多 badge、换行、描述、复制、Tooltip 和列表行为。

本项目最终决定不采用临时兼容规则，原因是：

Chromium 主分支已经撤销触发问题的行为。
Filament 已有正式 issue 跟踪。
本次故障属于视觉布局问题，不影响业务数据正确性。
避免为短期浏览器行为引入后续需要清理的项目级 CSS 补丁。

十、后续处理计划

项目暂不修改代码，后续按以下顺序跟进：

关注 Filament issue #20098 的维护者结论和修复 PR。
关注 Chrome 150 后续更新是否回合 Chromium 的撤销提交。
Filament 发布正式修复后，核对修复版本和变更范围。
升级 Filament 后重新构建前端资源。
分别使用 Chrome 129、Chrome 150 和包含 Chromium 撤销提交的新版本验证：
- 表格单值 badge
- 表格多值 badge
- Infolist badge
- badge + icon
- admin Panel
- mobile Panel
验证通过后关闭项目内部记录。

十一、结论

本次故障不是业务代码错误，也不是插件样式污染，而是以下三者共同作用产生的浏览器兼容问题：

Filament 文本容器通过 Tailwind line-clamp 生成旧式 display:-webkit-box。
badge 作为该容器的直接子项，原本依赖 inline-flex 保持内容宽度。
Chrome 150 将 -webkit-box 子项块级化，使 badge 的计算值变为 flex，再被默认的 stretch 行为拉伸。

Chrome 129、Chromium 148 和 Chrome 150 的对照测试，以及 Chrome 150 中采集到的计算样式，已经形成完整证据链。

项目选择等待 Filament 或浏览器上游修复，不增加本地兼容代码。