iOS版Chrome中AJAX成功/错误消息异常显示问题求助

这问题我之前也碰到过类似的，iOS版Chrome的一些行为确实有点坑，咱们一步步来排查：

先排查样式层面的可能 #

• 首先检查display: none的写法，有没有可能被iOS Chrome的默认样式或某些媒体查询覆盖？比如有没有用!important强制覆盖，或者是不是和visibility: hidden这类属性混着用了？建议先给消息div加内联样式测试：<div class="success-msg" style="display: none;">...</div>，如果这样能正常隐藏，那大概率是样式优先级的问题，得排查CSS里有没有针对iOS的媒体查询（比如@media (-webkit-min-device-pixel-ratio: 2)）不小心修改了display属性。
• 另外，iOS Chrome有时候对隐藏元素的渲染有奇怪的处理，比如元素内有动态内容时，可能在页面加载阶段短暂显示。可以试试用组合样式兜底：display: none; opacity: 0; pointer-events: none;，或者用visibility: hidden; height: 0; overflow: hidden的替代方案，看能不能解决异常显示的问题。

再排查AJAX/JS兼容性问题 #

• 先检查页面加载时有没有误触表单提交逻辑：比如你的JS是不是在DOM还没完全加载完就执行了？如果脚本放在<head>里没监听DOMContentLoaded，iOS Chrome的执行顺序可能和桌面端不同，导致提前触发了消息显示代码。另外，提交按钮如果没加type="button"，默认是submit类型，iOS Chrome可能会在页面加载时误触提交，触发消息。
• 然后检查AJAX请求的触发逻辑：有没有在iOS Chrome里默认发送了请求？比如表单的action属性没清空，或者事件绑定写错了（比如直接调用submit()而不是通过addEventListener监听）。可以通过iOS Chrome的远程调试（连电脑开启）查看网络面板，看页面加载时有没有意外发送的API请求。
• 还有一种可能是iOS的自动填充功能搞的鬼：它会自动填充表单字段，触发input或change事件，如果你的JS监听了这些事件并关联了消息显示逻辑，就会误触。可以给表单字段加autocomplete="off"，或者在事件监听里加判断，只有用户手动提交时才触发消息显示。
• 最后检查API请求的兼容性：比如有没有用iOS Chrome不支持的API（比如AbortController的某些特殊用法），或者Content-Type设置不对导致API返回错误，触发了错误消息。可以在控制台里查看有没有JS报错信息。

快速定位问题的测试方法 #

• 先注释掉AJAX提交的所有代码，只保留消息div的隐藏逻辑，看页面加载时消息会不会显示。如果还是显示，那就是样式问题；如果不显示，再逐步放开JS代码排查触发点。
• 在iOS Chrome控制台里手动执行document.querySelector('.success-msg').style.display = 'none'，如果能正常隐藏，说明是你的JS代码在某个地方修改了display属性；如果不行，那就是样式被强制覆盖了，需要排查CSS优先级。

内容的提问来源于stack exchange，提问作者c.gooderham94