iOS 17 H5兼容性危机：97%页面失真揭秘

　　去年国庆节，我在深圳南山那间出租屋改CSS——不是写新功能，是跪着调一个按钮的圆角。iOS 17一推，97%的H5页面失真，连个带阴影的浮层都悬在半空像被钉住的蝴蝶。不是渲染错位，是Webkit直接把transform-origin当摆设。我盯着Safari DevTools里那个灰掉的属性栏，突然想起一三年冬，王磊蹲在海淀黄庄麦当劳第三根柱子后面，用诺基亚N95拍下我们刚上线的论坛首页——当时他喊“这加载条动得比我心跳还稳！”

　　一三年，没人提“兼容性”。iPhone还跑着iOS 6，Safari连flex都不认，但我们干得挺野：后端吐纯HTML，前端就写三行JS劫持a标签跳转，靠location.hash推历史记录。李薇那时总穿蓝布鞋，踩着人字拖啪嗒啪嗒进办公室，往我显示器边塞一杯冰美式，手指蘸咖啡渍在玻璃上画路由图——就三个状态：首页、列表、详情。她写的弹窗用position:absolute+left/top硬算坐标，iOS上抖三下才到位，可用户不care，因为那会儿点开一个外链，能刷出整套BBS内容，比现在刷十条短视频还满足。

　　一七年我们开始租云服务器。不是为高并发，是怕备案通不过——当时网信办查采集站查得紧，张工连夜把所有爬虫日志删光，只留一个空白txt文件叫“readme.md”，发邮件给人家说“我们只做原创”。他删完叼着烟坐窗口吹风，楼下烧烤摊油星子溅到他衬衫第三颗纽扣上。那年我犯了个错：觉得H5该轻量化，把所有字体全换成系统默认，连Helvetica Neue都砍了。结果iOS 12一出，Safari默认渲染引擎把font-family: -apple-system, BlinkMacSystemFont, "Segoe UI"……这段链路里的逗号当分隔符解析失败，整个文字流塌成一片灰色方块。我原以为省掉30KB Web Font包能加快首屏，结果用户根本读不了标题。这步走错了，错在把“轻”当目的，忘了用户眼睛认字不认KB。

　　二二年团队扩到九个人。会议室装了双屏，白板上贴满Figma链接二维码，但没人扫——大家直接翻钉钉聊天记录找UI规范。陈默那会儿天天催我上CDN资源预加载，说“连iOS 15都支持preload了”，我嘴上应着，转身给所有JS加defer，心想反正苹果迟早跟上W3C。谁知道他们真拖到iOS 17才补全IntersectionObserver v2，而我们那些懒加载图片模块全在视口外卡死，像断电的电梯停在十七层——不上不下。去年国庆那天我调完按钮圆角，顺手点开老域名，发现一三年存档的论坛首页居然还能打开，就是顶部导航栏少两个像素宽。可它活得好好的，连cookie都没过期。

文章配图，仅供参考

　　上个月碰到老胡，当年做影视站的，早就不干这行了，在义乌做手机壳批发。他笑说我还在跟Safari打架，“你记不记得咱们那会儿拿iPad Mini测页面，就为看清楚1px线是不是锯齿？”我说记得，他摇摇头：“现在我壳子背面印‘iOS 17适配认证’，五块钱一个，卖得比你们代码还快。”

　　其实失真率97%这事，站得住的地方不是技术崩溃，是优胜劣汰——淘汰掉所有还把“写完页面”当终点的人。剩下那3%，要么把Safari当祖宗供着，要么干脆弃疗用WKWebView壳重写。我现在给新来的人讲规则，第一句就是“别信caniuse.com，信你手上那台真机”。可上周测试iOS 17.4 Beta，发现-webkit-backdrop-filter又抽风，蒙版透明度从80%跳到200%。我试了七种hack，最后靠在伪元素上叠三层rgba渐变糊弄过去。

　　现在这套我也拿不准还能干几年。

（编辑：均轻资讯网）

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