没搞清楚问题现象的教训

今天遇到两个技术问题，发现解决过程都走了弯路，值得记录和反思。

第一个问题：裁剪显示异常

曲线遮罩裁剪问题复盘
这是一个页面裁剪的问题。最初收到的反馈是在黑色模式下，通过APP打开文章时出现了显示异常。这样的描述让我们下意识地认为问题有两个先决条件：一是必须在黑色模式下才会出现，二是APP内打开页面与Safari浏览器打开可能存在差异。
基于这种假设，我们折腾了很长时间。后来我通过征集平台登录测试，经过多次尝试才发现，这个问题实际上与黑夜模式和白天模式无关，也与是否在APP内打开无关。即使直接用Safari浏览器打开，无论切换到白色模式还是黑色模式，都会出现同样的问题。
通过对比发现，我自己的iPhone没有这个问题，而出现问题的设备运行的是iOS 15版本，我的设备是iOS 18。因此，这很可能是不同iOS版本对SVG裁剪遮罩（mask）支持程度不同所导致的兼容性问题。

第二个问题：弹窗遮挡

第二个问题是我们的弹出窗口被Amy输入框遮挡。这个问题同样花费了不少时间，小东甚至去修改了弹窗的层级（z-index），因为我们下意识地以为这是网页层面的遮挡问题。然而，后来询问才得知，Amy的输入框实际上是APP原生组件，网页层面根本无法控制其显示层级。
最终的解决方案是为弹窗提供一个API，让业务方能够获取弹窗的显示和隐藏状态。业务方根据这个状态调用APP的相关接口，来控制Amy搜索框的显示或隐藏。

问题根源的反思

这两个问题暴露出了同样的根本问题：在着手解决之前，我们没有充分搞清楚问题产生的根源和实际现状是什么。我们过于依赖初始的问题描述，没有进行充分的环境复现和测试验证。
今后遇到类似问题时，应该先登录到对应的问题环境中进行实际测试，尽量多尝试、多使用，充分重现问题现象，先将问题的产生原因和触发条件摸清楚。不能在问题现象都不明确的情况下就盲目开始解决，否则方向错了，解决方案自然也不会正确。
本来很简单的问题，很可能因为我们没有搞清楚根本原因和触发环境，最终耗费大量时间和精力，问题却依然没有得到有效解决。这个教训值得牢记。