背景
在一个平凡的工作日中，突然有客户说我们产品的弹窗点击无法显示，这让我立刻放下了手里的活，去看了下线上环境，结果却是一切正常
这不禁让我有些奇怪，所以和客户要了截屏，最后发现在客户的电脑上点击无效，作为一个老开发，第一反应就是兼容性的问题
涉及到公司产品，暂时不能放出对应截图，不过会用 demo 截图来代替。
这里我用 demo 复现的场景：
这是正常的antd modal样式：
现状
目前我们的产品是 web 项目， modal 使用的是 antd 的 modal，可以在钉钉中被使用，而且因为注册了钉钉的应用，所以打开是通过钉钉的浏览器，难道是钉钉的兼容性问题？
所以也问了下客户，给到的回复是：他们使用的是最新版本的钉钉。
但是我们也是相同版本，那差异性，就应该在系统上了，所以问了下系统
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15 DingTalk(7.6.47-macOS-macOS-MAS-43763219) nw DTWKWebView Channel/201200
新的疑问：难道是系统的原因？ 10.15 是一个较低的版本
但是因为我们这并没有此系统版本，所以先尝试盲改一波看看效果
第一次尝试!
暂定的结论是：动画导致的加载异常，因为之前产品里碰到过一次类似的：因为动画导致的性能卡顿，而去除了全局动画
根据之前类似经验，这应该就是动画的问题了
说干就干
我先将 antd modal 的 动画去除：
打算上了线之后看看
结果很遗憾，并没有生效，看来事情并没有我想的那么简单
远程查看
这次我们再尝试远程下，因为要客户配合，我们要一起挑一个时间。
通过 vconsole 显示，查看他的 element 功能，可以看到 dom 里的 antd modal 结构是正常加载的， 但是却一直没有显示。
并且我们也在系统的 safari 里打开了链接，结果却是显示正常。
所以现在的问题根源可以定位于钉钉的默认浏览器兼容有问题
复现
因为要低版本的 mac 我尝试了虚拟机方案。
在尝试虚拟机的时候，因为对应低版本 mac 是 intel，而我的系统是 m1 版本，所以装不上对应的虚拟机，所以最终也是接别人的 intel mac 来装虚拟机
最终成功在虚拟机上复现此场景，在能够复现后，那我们可能通过各类方案进行尝试了
解决方案
我们从 CSS 开始调整
z-index
z-index 是常见的属性被遮盖时的解决方案，所以这里我优先想到的就是这个属性，但是结果缺不尽如人意
transform
在一起 iframe 中，我遇到过性能问题，此属性，就是用来启动硬件加速，让 modal 显示完整的方案之一
现状的样式：
这里我把背景色添加各类不同的颜色，方便做出判断：
这样就很明显了，modal 的实际大小并没有被撑开，所以是什么属性没有起效呢
解决
这里尝试了几个css属性的组合，最终还是定位的问题，添加如下css：
.ant-modal-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
min-height: 100%;
}
.ant-modal-wrap {
position: fixed;
left: 0;
right: 0;
top: 5%;
min-height: 100%;
}添加后，modal 的实际大小就被撑开了，点击也可以正常触发了
总结
这个问题也是以前从未遇到的疑难杂症，经验再丰富，没遇到过也会是一头雾水，不过关键点就在于，怎样才能在问题的迷雾中找到一条解决的路，通过属性的差异化，做好对比方案，才能最终找到问题所在。