Ionic应用中Ion-Searchbar在Android原生设备不显示问题排查

我开发的Angular（Ionic）应用在浏览器中运行完全正常（Angular v17.0.2，Ionic v8.2.2），但执行npx cap sync后在Android Studio的设备上运行时，Ion-Searchbar显示异常。已经排查过z-index无问题，HTML和CSS逻辑简单，暂时无法定位原因。

显示效果对比 #

• 浏览器端：搜索栏正常显示为白色圆角样式，与右侧按钮布局协调
• Android设备端：搜索栏样式错乱（如背景未正确渲染、布局错位）

HTML代码 #

<ion-row class="search">
<ion-col size="10">
<ion-searchbar #input (search)="searchJobs(input.value)" (keydown.enter)="searchJobs(input.value)" placeholder="Search For Jobs"></ion-searchbar>
</ion-col>
<ion-col size="2">
<ion-button mode="ios" class="ion-align-self-center" (click)="toggleModal()">
<ion-icon name="options"></ion-icon>
</ion-button>
</ion-col>
</ion-row>

CSS代码 #

ion-row.search {
padding-right: 1.5vh;
align-items: center;

ion-searchbar {
display: flex;
height: 50px;
width: 100%; /* Ensure it takes full width */
--background: white;
--border-radius: 10px;
}
}

排查与解决建议 #

• 适配Android平台样式：Ionic在Android（md模式）下有默认样式，可针对该模式单独调整：

ion-row.search {
  padding-right: 1.5vh;
  align-items: center;

  ion-searchbar {
    height: 50px;
    width: 100%;
    --background: white;
    --border-radius: 10px;
    /* 移除可能冲突的display:flex，组件内置布局已足够 */
  }

  /* 针对Android模式单独设置 */
  &[mode="md"] ion-searchbar {
    --box-shadow: none;
    --padding-start: 16px;
    --padding-end: 16px;
    --height: 50px;
  }
}

• 移除自定义display: flex：Ion-Searchbar本身自带布局结构，强制设置flex可能破坏移动端的原生适配，建议删除该属性。
• 重新同步资源：执行npx cap copy确保CSS等资源正确同步到Android项目，再重新构建运行。
• 版本兼容性检查：确认Ionic v8.2.2与Angular v17.0.2的适配情况，必要时升级到最新兼容版本。

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