GitLab

在调试商业直租小程序时发现iOS18设备，进入高级搜索之后点击选择框会出现文字始终覆盖在uni-popup之上，如图所示

解决思路： 首先判断为设备兼容性问题（安卓设备正常， iOS17正常）

尝试通过降低input的z-index层级，无效❎

尝试将uni-popup的层级提到最高，无效❎

尝试通过css强制降低层级，无效❎

/* 强制降低层级 */
        transform: translateZ(0);
        position: relative;
        z-index: 1;
        /* iOS兼容性修复 */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;

得出初步结论，与css的层级无关，继续排查

通过交互发现，只有当input元素被点击后，才会将层级置与popup之上，未点击过的则保持正常

则判断与input焦点相关

尝试将input中disabled属性移除

重新调试发现，点击input后，小键盘与uni-popup同时弹出，将小键盘关闭后，层级则恢复正常

则明确为input焦点问题

尝试通过JS处理点击后的焦点事件, 无效❎

<input 
   ...,
   @focus="preventFocus"
   @touchstart="preventFocus"
/>
methods: {
    preventFocus(e) {
      e.preventDefault();
      e.target.blur(); // 立即失去焦点
    },
  }

最后尝试通过css属性来禁止input的默认交互，完美解决✅

.search-input-content {
        ...,
        pointer-events: none; /* 阻止所有交互 */
        user-select: none; /* 阻止选择 */
        -webkit-user-select: none;
        -webkit-touch-callout: none; /* 阻止长按菜单 */
        -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
      }

最后得出问题结论，在input中使用disabled依旧会触发input的默认交互，只是因为设置了disabled所以小键盘被禁用了；并且在iOS中的聚焦拥有最高层级，超越css本身，所以只能前置不能通过JS后置；得通过css来提前禁止相关交互