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

　　去年二月份，我蹲在国贸三期B座18层的玻璃幕墙边改flex-wrap，窗外雨下得跟iOS系统日志刷屏似的——啪嗒啪嗒，没完没了。茶水间飘来一股隔夜韭菜盒子味，小杨叼着半截牙签出来倒咖啡，手一抖把奶泡泼在MacBook触控板上，键盘还留着上次他修完Safari WebKit Bug后没擦干的指纹印。

　　我们那会儿刚上线一个带伪元素滚动锚点的活动页，CSS里写了三行@media (prefers-reduced-motion: reduce)，结果在iOS 17.0.1上，所有::after都飘到视口外两百像素远，像被磁铁吸走的图钉。不是错位，是直接失踪。我敢打包票——你拿Xcode抓包看渲染树，节点还在，就是position属性在render layer里算出个负三千四百二十一的值。这数字我截图存了，就在桌面「iOS17崩溃复现」文件夹第三屏右下角那个没命名的PNG里。

　　王磊接了个电话，听筒漏音里传来“你们H5现在能跑通WebGL吗”——他嗯了两声，挂掉后把AirPods塞回去，手指在Figma里放大再放大，盯着那个按钮hover态的box-shadow：“你说，这阴影怎么从#666变成#000了？还是只在iPhone 14 Pro上？”我没吭声。因为他问的那一刻，我正盯着自己写的那行transition: all .3s ease-in-out——它在17上把border-radius和background-color锁在一个死循环里来回乒乓，帧率跌到七帧，用户手指悬停一秒，按钮就呼吸三次，吐出三个不同圆角。

　　优胜劣汰。真他妈是。不是说淘汰烂代码，是淘汰还信“一次写完全端通用”的人。我们组前天刚砍掉俩组件库，其中一个封装了二十种rem适配方案，另一个写了三百行polyfill检测逻辑。删完发现——有十八秒，整个项目build快了。就是那种你按完回车、端起保温杯、吹两下热气、抿一口枸杞水，还没咽下去，终端就弹出✅的十八秒。

　　小张昨天改完了首页瀑布流，用的display: grid + aspect-ratio。他在测iOS 17.2 beta时发现，当图片加载失败触发onerror重置src，grid-template-rows会突然坍缩成单行，且collapse后永远不恢复。我试过force reflow：getComputedStyle、offsetHeight、触发resize事件……全没用。最后是在will-change里硬塞了个transform: translateZ(0)，它才肯重新计算——可这么干之后，iOS录屏软件直接崩三次。这个我说不准是不是WebKit内部渲染管线某个flag没清干净，但我知道，苹果工程师八成在Chromium的bug tracker里贴了句“This is working as intended”。

　　对了，桌上那盒黄焖鸡米饭，塑料盖掀开时蒸气糊了我眼镜片，我伸手去摸眼镜布，摸到的是张皱巴巴的星巴克小票——上面印着二月十七号下午三点十一分，下单的是“iOS 17.0兼容性测试紧急餐补”，备注栏写着“请勿加热，加热后二维码失效”。我盯着那行字看了七秒，没动筷。后来发现小票背面用铅笔划了条横线，底下写：“@webkit.org bug #1273981 已关闭——‘非标准CSS导致布局不可预测’”。

　　我原以为只是viewport单位换算逻辑变了，结果翻了三天Webkit源码，才发现他们把LayoutUnit的默认精度从1/60px改成1/32px，中间穿插了段汇编优化……这段汇编，让所有calc(100vw - 372px)在横竖屏切换瞬间卡顿三百七十二毫秒——不多不少。我们埋了性能监控，但没报警，因为FP和FCP指标一切正常。真正崩的是用户感知：滑动页面时，顶部导航栏会延迟半拍才跟着动，像拖着条看不见的影子。

　　上周五例会，产品站那儿讲新需求：“要加个悬浮语音输入按钮，图标得旋转动画。”我敲键盘打断他：“iOS 17.2上transform: rotate()绕Y轴转，会触发GPU内存泄漏，连刷五次就白屏。”他愣住，然后笑：“哎哟，这么邪乎？”我点头。会议室空调嗡嗡响，老李在后排偷偷重启他的iPad——第三次了，屏幕右上角时间始终停在14:08:22，他手机闹钟倒计时也卡着不动。没人提这事，反正他总说“这代iPad用着比安卓旗舰顺”。

　　最荒唐的是伪类选择器链。你写a:hover::before，iOS 17把它拆成两个独立渲染pass，中间插了一帧空白；但你写a::before:hover，它又正常——只在有背景渐变的情况下。我测了十九遍。第十七遍时发现，只要给::before加个outline: 1px solid transparent，整套逻辑就复活。为什么？不知道。但那个outline，就像给幽灵画了条边界线。

文章配图，仅供参考

　　我们下周准备推个轻量版polyfill合集，叫“iOS17防失真袖珍包”，就六个文件，最大的不到2KB。不修bug，只打补丁：强制重绘区域、拦截特定transition、劫持getComputedStyle返回值……至于WebGL？算了，等他们哪天把WebGPU的Metal backend搞明白再说。现在先把h2标题文字别再自动缩到0.83em开始吧。

　　雨还没停。刚才又收到通知：17.4 beta里，:-webkit-full-page-media伪类彻底没了。文档里一行字都没提。我点了根烟，没抽，就夹在指缝里看它烧。烧到烟屁股那截，突然想起前天在食堂听见运维跟DBA聊：“你们Redis集群切主的时候，有没有遇到过key过期时间批量提前十七秒？”——没人答。勺子刮碗底的声音特别响。

　　我现在开着两台iPhone真机，一台连着xcode，另一台插着USB线镜像到桌面。中间摆着一杯凉透的美式，浮着层浅褐色油膜。我打算今晚试试把所有:has()选择器换成JS判断，虽然Vue3.4刚官宣原生支持——但iOS 17.3不认。这事儿我不打算再往下查了。明天上午十点，先跟设计对齐，把所有圆角统一改成8px。至少这个值，在17.0到17.4之间，没崩过一次。

（编辑：站长网）

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