uni-app App 端 iOS 15 ui-search-bar 组件 Bug

uni-app App 端 iOS 15 ui-search-bar 组件 Bug

uni-search-bar 搜索栏

在 iOS15系统，H5页面，显示了两个搜索图标，

iOS 15 以下系统正常，安卓页面也正常、微信小程序正常、支付宝小程序正常

alt alt


更多关于uni-app App 端 iOS 15 ui-search-bar 组件 Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

25 回复

请升级至HBuilderX 3.2.9版本

更多关于uni-app App 端 iOS 15 ui-search-bar 组件 Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看上面的截图，就是 3.2.9 最新版本的 HBuilder

回复 alpha_deer: 3.2.9测试正常，你可以升级到最新HBuilder X 3.2.12-alpha试试

https://hellouniapp.dcloud.net.cn/pages/extUI/search-bar/search-bar

官方例子，直接用 iOS 15 Safari 打开就有问题啊

HBuilder 3.2.12.20211029 版本，iOS 云打包 在 iOS 15 也存在此问题

回复 alpha_deer: 已发布修复

回复 jxtian: 怎么更新修复呢？？？

回复 alpha_deer: 升级到最新HBuilder X 3.2.12-alpha，重新发布

回复 DCloud_UNI_Anne: 项目是用 cli 创建的，下载了 HBuilder X 3.2.12-alpha 重新编译 H5 并没有解决。

cli 是否需要升级到对应的版本呢？

回复 jxtian: 项目是用 cli 创建的，下载了 HBuilder X 3.2.12-alpha 重新编译 H5 并没有解决。

cli 是否需要升级到对应的版本呢？

项目是用 cli 创建的，下载了 HBuilder X 3.2.12-alpha 重新编译 H5 并没有解决。
cli 是否需要升级到对应的版本呢？

https://uniapp.dcloud.io/quickstart-cli?id=cliversion

需要升级，cli创建的项目用的 node_modules 的编译器，与hx无关

为什么回答问题总是一次说一点点呢？？ 麻烦告诉一下需要更新到哪个版本才可以修复 https://www.npmjs.com/package/@dcloudio/vue-cli-plugin-hbuilderx

依据文档升级依赖：执行 npx @dcloudio/uvm

看了半天 都没看懂最后是怎么解决的 能直观明了的说下解决步骤吗…

执行 npx @dcloudio/uvm

回复 DCloud_UNI_GSQ: 执行了 还是不行

回复 8***@qq.com: 具体怎么不行，详细描述一下

回复 DCloud_UNI_GSQ: 运行了上面的命令之后 在手机上预览 没有作用

回复 8***@qq.com: 具体说一下

这是 iOS 15 系统 WebKit 内核的一个已知问题，在部分版本的 iOS 15 中，<input type="search"> 元素会错误地显示两个搜索图标。

解决方案：

  1. CSS 修复（推荐） 在 App.vue 或页面样式中添加以下全局样式：

    /* 隐藏 iOS 15 多余的搜索图标 */
[@supports](/user/supports) (-webkit-touch-callout: none) {
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

  2. 条件编译处理 如果只需要在 iOS 端应用修复：

    /* #ifdef APP-PLUS */
[@supports](/user/supports) (-webkit-touch-callout: none) {
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}
/* #endif */
回到顶部