iOS 去重点击灰色背景

在开发微信H5的时候,发现在iOS 上<wx-open-launch-app/> 组件点击有灰色半透明效果,有也行,但我的按钮是圆角,这个效果设置圆角一直不生效。

因为只在iOS 真机上出现,十分难调试,官方的开发工具切换为iOS 也没这个效果。另外<wx-open-launch-app/> 上一个自定义组件,也不确定这个效果是否能去掉,花了很多时间。

后来查到iOS 上有一个-webkit-tap-highlight-color 属性,置为透明能去除这个效果。于是看了下自己用的UI 库arco,确实设置了这个属性。<wx-open-launch-app/> 不生效可能是因为CSS 隔离了。

经过多番测试,这段代码终于去掉了这个点击的灰色效果。

*{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  appearance: none;
}

完整代码

<wx-open-launch-app
  id='launch-btn'
  style="position:absolute;top:0;left:0;right:0;bottom:0;border-radius: 20px;"
  extinfo='${extinfo}'
  appid="appid"
  >
  <template>
    <style>
      .wx-btn{
        width:100%;
        height: 40px;
        border-radius: 20px;
      }
      *{
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-appearance: none;
        appearance: none;
      }
    </style>
    <div class="wx-btn"></div>
  </template>
</wx-open-launch-app>

Leave a Comment

邮箱地址不会被公开。 必填项已用*标注