移动端CSS性能水土不服？真实场景压力测试

　　改版上线翻车。凌晨两点十七分，我盯着真机上那个按钮——hover 状态根本没触发，但 CSS 里明明写了 `@media (hover: hover)` 套了三层嵌套。不是不生效，是它压根没进这个媒体查询。我敢打包票：华为 Mate 60 Pro 的系统 WebView 里，`hover` 这个伪类在 touch 设备上根本不是“可选”，是“已阉割”。不是 disabled，是 init 时就被 skip 掉了。PM 十分钟前还在钉钉发了个“灰度很稳”的截图，背景是她工位上那张莫兰迪色系的猫爪壁纸，左下角还飘着半句没发完的“用户反馈特别……”。

文章配图，仅供参考

　　我原以为只是 `:hover` 问题，结果 F5 刷新了七次，第七次抬手、按键、松手，手指还没离键，控制台已经滚出三行 `Layout shift` 警告。Chrome DevTools 切在 Rendering tab，但勾了 “Paint flashing” 后满屏紫块——不是性能差，是它把每个 `transform: translateZ(0)` 都当新层刷了一遍，哪怕你只动一个 icon。三百七十二个节点，二十八个 `will-change: transform`，其中十九个连 DOM 都没挂载就先 `getComputedStyle` 了一轮。后端小张端着保温杯路过，杯底磕在我键盘右下角的 Alt 键上，“咔”一声，键帽弹起来又卡住一半，再也按不下去。

　　旁边测试同事老陈把手机横过来竖过去，像在给 iPhone 14 Pro 拜神。他倒水时手腕一歪，保温杯里那点枸杞水全洒在桌上那盒还没拆封的黄焖鸡米饭上。汤沿纸盒边漫开，刚好洇到我刚贴的那张便利贴：上面写着 `--primary-accent: #3a86ff; / fallback only /`。他念叨：“安卓机滑动卡顿明显，但 iOS 17.6 的那个 `scroll-behavior: smooth`，居然在 `` 上触发了两百次 `layout`。”我说“你确认是 `` 不是 ``？”他摇头说“没细看，反正 DevTools 的 Layout Profiler 报错里写的全是 `root`”。我信他，因为他昨天刚把整个动画 timeline 手动转成 requestAnimationFrame 重写了三次。不信的是他自己写的 `@supports (scroll-behavior: smooth)` 外面包了 `@media screen and (min-width: 320px)` ——这玩意儿在某些 vivo 系统浏览器里，会把 `@supports` 解析成 `@support` 然后直接扔掉整段规则。没报错，不执行，不 warning。就像你往茶水间倒咖啡粉，发现机器根本没启动，但杯子满了。

　　优胜劣汰？对。真淘汰。不是淘汰写法，是淘汰人。你得亲手在 OPPO R17 上试三遍 flex-gap，才能信 `gap` 在它的 Chrome 119 内核里只认 `1rem` 以下数值，超过就回退到 `display: block`。你得等测试提 Bug 单第十八次说“iOS 微信内置浏览器白屏一秒”，才发现问题出在那段用 `clip-path: polygon(...)` 做裁切的 loading 动画——它在 WKWebView 里根本不动画，而是把整个 layer 锁死了，直到 DOM 渲染完毕才突然闪出来。三百毫秒的闪，算“正常加载”，不算 bug。这哪是水土不服，这是器官移植排异反应。我见过三个项目砍掉所有 `backdrop-filter`，就因为某厂商把高斯模糊实现在了 GPU 驱动里，只要页面一进后台再切回来，整个视图树直接 `glDeleteTextures` 清空。清空得干干净净，连回退都不留栈。

　　键盘 Alt 键还是卡着。我伸手抠了一下，指甲缝里沾了点黑色塑料屑。PM 早上九点又来了条消息：“用户问为什么首页瀑布流没‘继续加载’按钮”，后面跟了个表情包，是只咬自己尾巴转圈的仓鼠。我没回。她不知道那个按钮的 SVG 路径用了 `path(#shadow)` 引用，而 shadow filter 是在 `` 最底部声明的；但某个小米系统会把 `` 里超过一百五十字符的 `filter` 全部忽略。不是兼容问题，是解析器读到字节就截断。我们后来改成 inline style 里写 `filter: url(#shadow)` 加 `!important`，才救回来。重要吗？重要。但谁记得住这档子事。上周 Code Review 我看到一个同学在 PR 里写 `.btn::before { content: '▶'; }`，我说“别用 Unicode 箭头，有些字体没这个 glyph”，他立刻回“哦那我换成 SVG symbol”。我笑了下，没说其实某些国产浏览器对 `` 标签的 `viewBox` 解析精度是 0.5px 步进，0.7px 就会丢掉整个 symbol 实例。我说了也没用，他下次会去查 MDN，查不到答案，就写死成 1px。

　　今天午饭外卖的汤洒了一滴，在 MacBook 触控板边缘凝成一小颗褐色油珠。我用纸巾按了三下，没吸干，反而糊开了。就像你给 `position: sticky` 加 `z-index: 9999`，结果在三星 S23 的多窗口模式下，它粘在了分屏线另一侧。不报错，不崩，就是永远卡在 0.732 屏幕宽度处，纹丝不动。你说怎么测？没法测。只能堆人。三个测试轮流拿不同型号真机蹲点划拉，每人每天记录三组“卡顿起始坐标+滑动速度+帧率跳变点”。数据没人看，就存在飞书文档最后一页，标题叫“临时观测表_勿删（已失效）”。我已经删过两次了。删之前顺手复制了段 CSS：`.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }` ——这个 `160px` 是硬编码的。因为 `20ch` 在 OPPO 某些固件里会被 round down 成 `19ch`，然后 `minmax()` 就崩溃了。崩溃得悄无声息，就让 grid 变成单列。崩溃得我到现在都不知道是 V8 解析问题还是 Blink 的 grid layout engine 的边界条件缺陷。我说不准。

　　工资单上有个税扣得比上次多了七块钱。我猜是季度奖金计税方式变了。但这跟我刚才在真机上发现的 `transition: opacity .3s ease-out` 在折叠屏展开瞬间强制 reset 到 0 没关系。真没关系。我刚用 `getComputedStyle(el).opacity` 在控制台打了五次，每次返回值都是 `"1"`，但实际视觉就是 0。我重新打开 DevTools，切到了 Console tab，敲 `el.style.opacity = "1"`，它立马显形了。不是硬件加速问题，不是图层合并问题，是这个机型 WebKit 内核的 `getComputedStyle` 读的是 layout tree 的 cached value，而 transition trigger 后的真实 render tree 没同步更新这个缓存。我录了个 Lighthouse 报告，performance 分数 92，accessibility 97，SEO 95。只有 Best Practices 是 48。下面红字写着：“Avoid non-composited animations”。我没点开详情。点了也没用。详情里不会告诉你：这个 `non-composited`，在 Realme GT Neo5 上，指的是任何带 `rgba()` 的背景色动画。不是 `background-color: rgba()`，是 `background: linear-gradient(rgba(), rgba())` 里的 `rgba()`。它不走合成器，它走 CPU 绘制，每帧 call 一次 `paint`，然后卡在 `Canvas::drawPath`。卡在哪儿？卡在我工位右边双屏中间的接缝阴影里——左边屏是 macOS 默认星空壁纸，右边屏是我自己做的深灰渐变 CSS 代码截图，里面第三行正好写着 `rgba(255,255,255,0.8)`。

　　算了。今晚不修了。我把那盒黄焖鸡米饭推进抽屉，盖上。明天晨会再说要不要降级成 `opacity` 加 JS throttle。反正产品经理没提“动画要丝滑”，她只说“用户要能点进去”。行。点进去就行。别的，随缘。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!