• IanShaw027's avatar
    fix(ui): 修复在 macOS 系统下数据表格横向滚动条闪隐和消失的问题 · fe211fc5
    IanShaw027 authored
    问题原因:
    原本的 `style.css` 代码全局使用了 W3C 标准属性 (`scrollbar-width`)。而在 Chrome 121+ 以及 Safari 环境下,一旦匹配到 W3C 标准属性,浏览器就会放弃 WebKit 的定制样式,全面交由操作系统原生渲染。因为 macOS 原生的滚动条特性就是“不滚动时自动隐藏”,加之原本又配置了全局 hover 时才显色的透明度逻辑,最终导致在苹果系统下数据表常常无法明显看出横向滚动条。
    
    修复方式:
    1. 在 `style.css` 中增加 `@supports (-moz-appearance:none)`,将对全局 `scrollbar-width` 的干预严格隔离限制在 Firefox 浏览器内,防止误伤 Chrome 等 WebKit 系浏览器。
    2. 移除旧版代码中对 `.table-wrapper` 直接定义的 `scrollbar-width` 和透明覆盖。
    3. 在 `DataTable.vue` 内部,通过 `!important` 将 Webkit 专属定制外观(12px高度,实心圆角灰色轨道)的优先权推至最高,强制覆盖透明隐身规则。
    4. 为底层 table 添加了 `min-w-max` 属性,强制阻止内容宽度受限于屏幕边界带来的收缩,充分保证合理超出范围而触发常驻横向溢出。
    fe211fc5
style.css 17.6 KB