uni-app input组件在某种环境会表现异常

uni-app input组件在某种环境会表现异常

开发环境 版本号 项目创建方式
Mac 10.15.6 HBuilderX

操作步骤：

  • input框设置confirm-type=“search”

预期结果：

  • 正常显示

实际结果：

  • 显示异常

bug描述：

只要用sarfari内核的浏览器版本是13.1.2的，input框如果设置confirm-type=“search”，input框内会有一长段的空白遮挡。

bug图片


更多关于uni-app input组件在某种环境会表现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app input组件在某种环境会表现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的信息，这是一个在特定Safari内核浏览器（版本13.1.2）上，input组件设置confirm-type="search"时出现的UI渲染bug，表现为输入框内存在异常空白区域。

问题分析：

  1. 环境特异性：该问题与confirm-type="search"属性在Safari 13.1.2内核下的原生渲染机制有关。不同浏览器或版本对WebKit内核的实现细节可能存在差异，导致CSS渲染异常。
  2. 属性作用：confirm-type主要用于定制键盘右下角按钮的文本（如“搜索”），但在部分旧版本WebKit中，可能会触发非预期的内置样式或布局计算。

临时解决方案： 由于这是特定环境下的原生渲染问题，可以尝试以下CSS方案进行覆盖修复：

/* 全局或组件内样式 */
uni-input input[type="search"],
.uni-input-input[type="search"] {
  /* 清除Safari默认样式 */
  -webkit-appearance: none;
  appearance: none;
  /* 调整内边距可能影响空白区域 */
  padding-left: 8px;
  padding-right: 8px;
  box-sizing: border-box;
}

/* 若空白由伪元素导致 */
uni-input input[type="search"]::-webkit-search-decoration,
uni-input input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
回到顶部