iOS 17 H5兼容性危机：97%页面失真之量子视角
|
线上出问题的那一刻，我正盯着Xcode编译进度条卡在87%——就那种死活不动、风扇狂转、你点它一下它才抖两格的卡。不是build error，就是卡。群里已经炸了，设计甩了张截图：“按钮没了？！圆角变直角？！这UI是回炉重造了吗？”我划了三遍，才看清她圈出来的那个button，border-radius没生效，但devtools里显示style没被覆盖……我原以为是CSS层叠顺序乱了，结果切到iOS 17真机一刷，整个section直接塌陷成两行文字加一个空白div。 去年九月份，刚升完系统，连着三天灰度发版都回滚，后端同事把埋点上报日志拉出来，白屏率从0.3%跳到28%，但关键不是白屏——是97%的页面“活着”，但全在演哑剧：flex布局算错主轴长度，sticky定位飘到视口外两百像素，transform-origin认的是左上角不是中心，甚至有个输入框focus时placeholder文字颜色变成#00000000（真·透明黑）。没人报错，console干净得像没写过JS。我就蹲在devtools里，手抖着改一行display: flex，再切回去，它又好了——然后换台设备，又挂。不是缓存，不是CDN，不是UA识别错误。是WebKit内核在iOS 17里，对同一个CSSOM树，执行了两套不相容的布局引擎。 窗外在下雨，雨点砸在玻璃上拖出斜线，跟我们那个被撑变形的横向滚动列表一模一样。产品冲进会议室拍桌说“用户根本分不清这是H5还是PWA，体验崩了就是我们崩了”，我说那咱把所有flex改成float？他愣住，说“你认真的？”——我当然不是认真的。我认的是，我们写了八年响应式，结果最后栽在justify-content: center到底该不该吃掉父容器溢出的padding。我试过把所有rem换成px，试过禁用will-change，试过给body加translateZ(0)，还试过把webpack split chunk全关掉重新打——体积大了42%，加载慢了1.8秒，但失真率从97%掉到96.3%。就0.7个百分点。值得吗？我不敢说。但我敢说，这事没救——不是技术没救，是生态没救。 旁边工位的风扇声突然停了，安静得耳鸣。我盯着控制台里一条没报错的warning：[Warning] Attempting to focus a non-focusable element (index.html, line 1) —— 可那个input明明tabIndex=0。我查源码，它有focus()调用，也有preventDefault()拦截，逻辑没错。结果发现，iOS 17里，focus()执行成功，但document.activeElement始终是body。不是阻塞，不是异步延迟，是执行成功+结果无效。就像薛定谔的焦点：你测它，它坍缩成未聚焦；你不测，它可能正悄悄聚焦。后端这时候在群里发了个表情包：一只猫举着“我也没搞懂”牌子。我没笑。我点了根烟——等等，我早戒了，是记错，其实是捏了捏眉心。 我原以为问题出在CSS Custom Properties变量注入时机，结果改了三版构建配置，失真还在。后来发现是WebKit把标签里的@keyframes解析成了空规则集，但只在某个特定JS执行顺序下——不是每次加载，不是每个路由，是当页面里第7个Promise.resolve()之后紧跟着一个MutationObserver触发时。你没法复现，除非你刚好在devtools里手动暂停过一次，而且暂停点卡在microtask队列清空前0.3毫秒。我们组两个人同时抓包对比，一个失真一个正常，diff出来的唯一区别是他昨天重启过MacBook——不是模拟器问题，是设备指纹层面的随机性。真·量子退相干。
文章配图，仅供参考 前两天招聘面一个应届生，他简历写着“熟悉Vue3响应式原理”，我随口问：“如果effect执行时trigger依赖的getter突然返回undefined，track会丢链吗？”他答得挺好。但我没问他能不能修好一个在iOS 17里把background-clip:text当background-color渲染的按钮。我们筛人，筛的是确定性能力。可现实是，现在最需要的能力，是接受非确定性结果，并在97%失真里，挑出那3%能靠手动画出来的区域，优先保命。设计今天上午又来问：“圆角能圆回来吗？”我说能，加!important就行。她问“加几个？”我说两个，第一个让Chrome认，第二个让Safari 17.0认。她翻白眼走了——其实她没走，是去订外卖了，群里闪了张“黄焖鸡米饭已下单”的图。我看了眼时间，中午十二点十七分，离上次完整吃饭过去三十八小时。优胜劣汰这个词，我一开始是不信的。我以为只是苹果又懒了，忘了跑回归。结果熬到凌晨四点，拿六台真机横竖对比，看到同一个viewport-width，在iPhone 15 Pro Max上解析为390，在iPhone 14上却是390.25（对，小数点后两位），而我们的rem计算直接Math.floor了。不是bug，是精度策略变更。他们没改API，没动文档，就在底层把CSS数值系统悄悄迁移到了新的浮点处理单元——没有公告，没有Deprecation，就像海平面悄无声息升高两毫米，只有潮间带的生物最先窒息。所以站得住？站得住。不是因为技术正确，是因为淘汰来得比补丁快。上周三我们还在推SSR优化，周四就被通知：别优化了，先让H5别在用户手机上跳探戈。 所以接下来怎么弄？我打算把所有flex-direction: row-reverse的组件，先切回row，加一层伪元素镜像；所有position: sticky，全换回scroll事件监听+transformY；至于字体抗锯齿失真——算了，这个真没招，认了。反正用户也看不出Helvetica Neue和SF Pro Text在22px下差那0.3个像素的灰度渐变。哦对，刚才后端说他那边埋点数据导出卡住了，Excel文件打不开。我让他试试用Numbers打开——他说Mac没装Numbers。我说那你重启下电脑。他回：“我刚重启过。”我删了这句话，没发出去。 （编辑：我爱资讯网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
