uni-app 安卓下 overflow:hidden 没有正确处理 border-radius

uni-app 安卓下 overflow:hidden 没有正确处理 border-radius

开发环境 版本号 项目创建方式
Windows macOS Big Sur 11.2.3 CLI

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：macOS Big Sur 11.2.3

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：MI 8

页面类型：nvue

打包方式：云端

CLI版本号：v2.0.0-alpha-31920210429002

示例代码：

.card {  
    position: relative;  
    overflow: hidden;  
    border-radius: 10rpx;  
}  

.num {  
  position: absolute;  
  right: 0;  
  bottom: 0;  
  left: 0;  
  align-items: center;  
  flex-direction: row;  

  &-place {  
    position: absolute;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    height: 60rpx;  
  }  
}

更多关于uni-app 安卓下 overflow:hidden 没有正确处理 border-radius的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

css 没学好呀 小朋友

更多关于uni-app 安卓下 overflow:hidden 没有正确处理 border-radius的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你可以在nvue下尝试下，我的问题不是圆角不能实现，而是nvue在iOS和android下nvue对 overflow的实现有差异，以及绝对定位时，android 存在1px偏差的问题。和css没关系，我不是为了让别人告诉我怎么解决这个问题而提问题，我自己知道怎么解决，而是这个问题不应该是问题，需要uni团队处理

在 Android 平台的 nvue 页面中，overflow: hidden 与 border-radius 结合使用时确实存在兼容性问题，这主要是因为原生渲染引擎对 CSS 属性的支持限制。nvue 使用原生渲染而非 WebView，某些 CSS 属性（如 overflow）的行为与常规 H5 页面不同。

针对你的代码，建议尝试以下方案：

  1. 将 .card 容器的 overflow: hidden 替换为 clip-path: inset(0 round 10rpx)，但需注意 clip-path 在部分 Android 版本中的兼容性。
  2. 避免在绝对定位的子元素上直接使用 overflow，可改为在 .num-place 上单独设置 border-radius 并隐藏溢出内容：
    .num-place {
  border-radius: 0 0 10rpx 10rpx;
  overflow: hidden;
}
回到顶部