一招搞定iOS与Android H5渲染差异

　　去年十月份，我蹲在客户现场改一个H5页的按钮圆角——iOS上圆得跟荔枝皮似的，Android上愣是锯齿状，连阴影都飘得不是同一片云。我原以为是flex布局惹的祸，结果把display: flex全干掉，圆角还是两套语法各走各的路。

　　现场就三个人：我、前端小陈、客户那头戴黑框眼镜的测试妹子。她手指戳着iPad Air第四代，又划拉一下小米13，嘴上没停：“刘工你再点点看，左上角那个‘立即领取’，iOS点完有0.2秒回弹动画，安卓直接啪一下跳转——用户反馈说像卡顿。”小陈马上切到控制台，手抖着改-webkit-border-radius，改完刷不出来；我又切回安卓真机调试，发现border-radius: 8px根本不生效，非得写成border-radius: 8.0px才肯认（你说怪不怪，小数点后零都得显式写）。反正我也不知道为啥必须加个.0，但加了它就通了。

　　这时候小陈突然把手机翻过来给我看：屏幕右下角粘着一粒芝麻大小的灰点，他早上擦过三次，还说可能是新换的贴膜没贴严实。我伸手想抠，他躲开了——他说这灰点是他上周五熬通宵时咖啡溅上去的，没擦干净，现在成了他的“压力计”，哪天看见它发亮，就知道今天代码又要被压垮。

文章配图，仅供参考

　　可问题来了：iOS Safari至今不认8.0px这个写法，但它居然也没报错，就当没看见，继续用自己那一套渲染。我试过把8.0px改成8.00px，它照样无视；改成8px，安卓又崩一角。所以“一招搞定”这事，站得住的地方其实是优胜劣汰——不是技术赢了，是哪个平台先放弃较劲，谁就赢了。

　　对了，那天下午三点十七分，会议室空调滴水，嗒、嗒、嗒，落在铁皮接水盘上。还有小陈耳机里漏出来的钢琴曲，是德彪西《月光》第三段，我听出错音了，但没好意思说——他耳机线是绿色的，接的是红蓝双色USB-C转接头。

　　后来我把所有圆角全换成8.0px，连按钮内部icon的border-radius都套上了，上线后用户反馈“看起来顺眼了”。客户没提别的，测试妹子把那张对比截图存进了钉钉收藏夹，文件名叫“刘工的0.0”。我问小陈为啥不早试浮点写法，他摘下眼镜擦了擦说：“我原以为只有Android吃这套，结果iOS根本不在乎你写啥，它只在乎你别动它的渲染管线。”

　　有谁碰到过这个吗——明明加了.0就能活，不加就裂，但谁也说不清到底是哪条引擎分支悄悄绕开了规范？

（编辑：航空爱好网）

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