Svelte Kit网站下拉按钮iOS端点击无响应问题求助

问题概况 #

• 工具类型：Binary、十六进制、八进制与ASCII码转换器
• 异常现象：iOS系统中两个自定义下拉选择按钮点击无响应，Android/Windows端运行正常，Mac系统未测试
• 已尝试操作：修改viewport meta标签，问题未解决

相关代码片段 #

<div class="mb-10 mt-5"> 
  <!-- 第一个选择按钮 --> 
  <button class="btn variant-filled-secondary w-48 justify-between" use:popup={popupCombobox}> 
    <span class="capitalize">{listValue ?? "Select"}</span> 
    <span class="material-symbols-rounded">expand_more</span> 
  </button> 

  <!-- 第二个选择按钮 --> 
  <button class="btn variant-filled-secondary w-48 justify-between" use:popup={popupCombobox2}> 
    <span class="capitalize">{listValue2 ?? "Select"}</span> 
    <span class="material-symbols-rounded">expand_more</span> 
  </button> 

  <!-- 第一个下拉列表 --> 
  <div class="card w-48 shadow-xl py-2" data-popup="popupCombobox"> 
    <ListBox rounded="rounded-none"> 
      <ListBoxItem bind:group={listValue} name="medium" value="ASCII">ASCII</ListBoxItem> 
      <ListBoxItem bind:group={listValue} name="medium" value="Binary">Binary</ListBoxItem> 
      <ListBoxItem bind:group={listValue} name="medium" value="Octal">Octal</ListBoxItem> 
      <ListBoxItem bind:group={listValue} name="medium" value="Hex">Hexadecimal</ListBoxItem> 
    </ListBox> 
  </div> 

  <!-- 第二个下拉列表 --> 
  <div class="card w-48 shadow-xl py-2" data-popup="popupCombobox2"> 
    <ListBox rounded="rounded-none"> 
      <ListBoxItem bind:group={listValue2} name="medium" value="Octal">Octal</ListBoxItem> 
      <ListBoxItem bind:group={listValue2} name="medium" value="Hex">Hexadecimal</ListBoxItem> 
      <ListBoxItem bind:group={listValue2} name="medium2" value="Binary">Binary</ListBoxItem> 
      <ListBoxItem bind:group={listValue2} name="medium2" value="ASCII">ASCII</ListBoxItem> 
    </ListBox> 
  </div> 
</div>

排查与修复方向 #

1. 强制iOS识别可交互元素 #

iOS Safari有时会忽略未绑定触摸事件的自定义按钮，给按钮添加空的ontouchstart属性，强制浏览器将其标记为可点击元素：

<button 
  class="btn variant-filled-secondary w-48 justify-between" 
  use:popup={popupCombobox}
  ontouchstart=""
>
  <!-- 按钮内容 -->
</button>

2. 检查元素层级覆盖 #

确认按钮没有被上层不可见元素遮挡，给按钮添加相对定位和更高的z-index：

.btn {
  position: relative;
  z-index: 10;
}

3. 替换第三方Popup指令 #

如果使用的第三方use:popup指令在iOS下存在事件委托bug，可以手动实现弹窗的显隐逻辑：

<script>
  let showPopup1 = false;
  let showPopup2 = false;
  
  const togglePopup1 = () => showPopup1 = !showPopup1;
  const togglePopup2 = () => showPopup2 = !showPopup2;
</script>

<!-- 第一个按钮 -->
<button 
  class="btn variant-filled-secondary w-48 justify-between"
  on:click={togglePopup1}
  ontouchstart=""
>
  <span class="capitalize">{listValue ?? "Select"}</span>
  <span class="material-symbols-rounded">expand_more</span>
</button>

<!-- 第一个下拉列表 -->
{#if showPopup1}
<div class="card w-48 shadow-xl py-2">
  <ListBox rounded="rounded-none">
    <ListBoxItem bind:group={listValue} name="medium" value="ASCII">ASCII</ListBoxItem>
    <ListBoxItem bind:group={listValue} name="medium" value="Binary">Binary</ListBoxItem>
    <ListBoxItem bind:group={listValue} name="medium" value="Octal">Octal</ListBoxItem>
    <ListBoxItem bind:group={listValue} name="medium" value="Hex">Hexadecimal</ListBoxItem>
  </ListBox>
</div>
{/if}

4. 禁用触摸动作延迟 #

添加CSS规则消除iOS下可能存在的点击延迟：

.btn {
  touch-action: manipulation;
}

内容的提问来源于stack exchange，提问作者Abhinav PR