我用码上掘金给Apple官方反馈了iOS16的CSS Bug

背景

近日，有多个用户反馈我负责的页面出问题了，且都升级了iOS16。

所以，我连忙更新我的iOS测试机到iOS16做验证，果然，是个必现问题。

这个问题不太方便排查，因为只有iOS16、iPad OS16才能复现，在Mac上使用浏览器不能直接调试样式。

也有解决办法，可以使用Safari连接移动设备调试。步骤是：

2. 在iPhone或iPad上，打开设置-Safari浏览器-高级-网页检查器，开启这个开关。



3. 用数据线连接iPhone或iPad到Mac上。
4. 手机上使用Safari浏览器打开网页。
5. Mac上打开Safari浏览器，偏好设置-高级，开启勾选框「在菜单栏中显示“开发”菜单」。
7. 在Safari浏览器菜单栏，选「开发」，选你的设备，再选该设备打开的网页。



8. 会打开调试器，你就可以像Debug PC端网页一样，Debug移动端了。

这个做法也可以调试移动端的其它浏览器、APP中的WebView也可以调试。但是部分APP（例如微信）不支持。

iOS16的Bug

找到出问题的元素，再用二分法，通过注释样式、修改样式等方式，我终于找到了问题。太不容易了。问题如下：

当我们给具有​​float: left​​​样式的元素设置​​text-align-last: justify​​​时，在iOS16上，这个元素就看起来是​​width: 100%​​​，这跟其它操作系统的浏览器表现不一致，其它浏览器看起来是​​width: fit-content​​。

反馈的过程

我去Apple开发者官方网站，找到了「开发者支持」：​​developer.apple.com/cn/support/​​

找到了这个：

点开「提交错误报告」，进入这里：​​developer.apple.com/cn/bug-repo…​​

然后点击「联系我们」：

点击「反馈和其他主题」：

我怀疑这是iOS16的错误，所以我们点「报告错误」：

点击「反馈助理」，跳转到这个页面：​​developer.apple.com/bug-reporti…​​

好家伙，原来我兜兜转转又回到了「提交错误报告」的页面（英文版）。点击「Feedback Assistant website」打开：​​feedbackassistant.apple.com/​​

点击这里新建Feedback：

下面，选择问题类型，我选「iOS & iPadOS」

需要填写这些信息：

选择「Which area are you seeing an issue with?」，选项挺多的，因为是Web里CSS问题，所以我选WebKit：

再选择「What type of feedback are you reporting?」，我选不符预期的行为。

在选择「What does the WebKit issue you are reporting involve?」，因为是CSS问题，属于「Layout & Rendering」，选择即可。

最后提供问题描述，相关文件。

我直接提供了在线code。但是码上掘金界面是中文的，而且不点「运行」不会展示。所以我额外提交了一个图，告诉他们怎么Run code：

下面的截图，是在iPad OS16上的截图，真的是有BUG，不骗你：

写在最后

​​你可以在这里看到我的Feedback。​​

希望Apple能早日解决这个问题并回复，天降Bug，心累。我最后通过设置​​max-width​​，最小成本解决了这个问题。

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了​​《联机桌游合集》​​​，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了​​《合成大西瓜重制版》​​​。还开发了​​《Dice Crush》​​​参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：​​《教你做小游戏》​​​、​​《极致用户体验》​​。