一招终结iOS/Android H5渲染差异

　　去年2月，上海暴雨。我在虹桥站西广场那家全家等高铁，手机连着公司WiFi，盯着Android机上H5页面里那个按钮的圆角——它比iOS真机多撑开两像素，阴影偏左三像素，但iOS模拟器上完全正常。我截图发群里时老张正啃冷掉的蟹粉小笼，油渍蹭在MacBook壳上，说“你先切个rem单位试试”。

　　我原以为是viewport缩放惹的祸，结果把initial-scale=1.0硬写死之后，安卓Chrome反而开始吃掉input:focus后的outline-offset。这事儿怪，真怪。iPhone 13 Pro上border-radius: 8px就是8px，Pixel 6上同一行CSS跑出来是8.3px——不是四舍五入，是渲染管线里被插了一刀，活生生多出来个亚像素混叠偏移。我说不准是不是Webkit/Chromium的rasterizer对devicePixelRatio的采样时机差了半帧，但我知道，上周三凌晨两点，运维在机房喊“又崩了”，声音压着空调外机的嗡鸣传出来，震得我手边那盒没拆封的燕麦奶晃了一下。

　　我们组那台二手iPad Air 2（2014年款）跑测试用例时，居然比新配的iPad mini 6更接近Android的表现。它不抗锯齿，文字发虚，但button:hover状态的过渡延迟居然和三星S22一致。我敢打包票：它俩的paint layer合成顺序错位方式一模一样。那天下午茶歇，实习生小林端着杯子路过我工位，指尖在Air 2屏幕上划了三下，停在第三下，没点中，只是无意识摩挲着玻璃——那一瞬我突然记起：去年Q4我们砍掉的那个hybrid桥接层，里头有一段native patch，专门把WKWebView的CSS transform锚点从center硬掰到top left……

　　后来我就不再修CSS hack了。改一行：-webkit-appearance: none; appearance: none; 然后所有自定义控件重画。不是用canvas，是用纯div + pseudo-element + clip-path组合拳。iOS的::after伪元素能精准卡在border-box边缘，Android的::before也终于肯听话。中间试过clip-path: inset(0); 和 clip-path: polygon(0 0,100% 0,100% 100%,0 100%); 效果居然一样——但前者在iOS上偶尔闪白帧，后者在Android上滚动会卡顿十八秒。最后选了后者。不是因为它快，是因为它败得干净，一眼能定位是哪层layer在丢帧。

　　优胜劣汰，就是这个意思。你让两个渲染引擎在同一份DOM结构上撞，撞碎的一定是你写得最松的那部分。上周五评审会上，前端老大举着平板说“能不能再兼容下UC内核”，我扒拉了下桌上那盒外卖——糖醋排骨的酱汁已经渗进纸盒折痕里，深褐色，粘稠，没动过——直接点了退出共享屏幕。他后面半句我没听清，只看见他左手食指反复摩挲右耳垂，像在按某个并不存在的降噪键。

　　其实真有更快的办法：全量禁用-webkit-font-smoothing，但那样iOS上所有中文会发虚，像隔着一层毛玻璃看简历PDF。我们产品总监去年十一刚入职时就提过这事，她盯着测试报告上“文本可读性下降17%”那行字，没说话，把笔记本合上，金属外壳磕在木桌沿上，“咔”一声脆响。现在她的笔记本换了，新本子合盖时没声儿了。

文章配图，仅供参考

　　有天凌晨三点，我在公司楼下的便利店买关东煮，老板蹲在地上整理货架底层的鱼豆腐，抬头问我：“你们搞AI的，是不是也分训练和推理？”我点头，他拎起一包没拆封的魔芋丝：“你看这包装，印的‘非油炸’三个字，iOS扫描能扫出粗细变化，Android扫出来是平的——同一个印刷厂出来的，同一个扫码枪。”我没接话，付完钱转身走了，塑料袋提手勒进手指，勒出三道浅红印子。

　　所以现在我们交付H5，不跑双端截图对比，直接跑渲染树diff。把Android Chrome DevTools抓的layer树导出JSON，再抓一遍iOS的，拿Python脚本比对paint layers的z-index、transform-origin、will-change字段是否一致。不比像素，比意图。只要layer结构一致，像素偏差交给设计师判——他们早该习惯自己调色值了。至于那些还坚持用vw/vh做响应式的，随他们去吧。前两天小林提交PR，加了个@media (min-width: 375px) { ... }，我review的时候comment了一句：“你试试把375换成374.9，再测一遍”。她回了个“????”，没改，但第二天早上十点零七分，她删掉了整个媒体查询块，换成了基于container queries的方案。

　　这招终结不了差异。它只是让差异显形，快一点，痛一点，然后逼你认领——哪一段代码，是你亲手埋的雷；哪一次妥协，是用用户眼睛当探针。下周二我要去苏州参加那个Web性能峰会，主办方要求带实机演示。我已经把iPhone和小米13塞进同一个防震盒，盒子里垫了两层气泡膜，中间夹着一张A4纸，上面用铅笔写的不是技术要点，是“别碰home键”。

（编辑：站长网）

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