uni-app nvue IOS下圆角和背景色设置有bug
uni-app nvue IOS下圆角和背景色设置有bug
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 家庭中文版 21H1 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
HBuilderX类型：Alpha
HBuilderX版本号：3.4.8
手机系统：iOS
手机系统版本号：iOS 13.0
手机厂商：苹果
手机机型：iPhone XR / iPhone 13 Plus
页面类型：nvue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
### 操作步骤：
```html
<view v-for="val in 20" :key="val" style="width:100rpx;height:100rpx;" :class="{checked:val===inx}" [@click](/user/click)="inx=val">{{ val }}</view>
.checked{
background:#000;
border-radius:8rpx 0 0 0;
}预期结果：
没有checked类名的元素不应有背景色
实际结果：
点击过的元素背景色没有被消除
bug描述：
当设置的圆角为1个或者2个或者三个的时候，动态改变背景色，设置圆角的元素背景色无法还原，没有圆角或者四个角都是圆角的时候没有这个bug
7 回复
IOS15，iPhone 6s Plus，未复现问题。
请提供下录屏看下表现（上传附件），仅这个设备出现吗？试下换其他设备是否正常呢？
【咨询问题/bug处理优先级规则】：https://ask.dcloud.net.cn/article/38139
在 uni-app 的 nvue 开发中，确实存在一些在 iOS 平台上关于圆角和背景色设置的已知问题。以下是一些常见的 bug 及可能的解决方案：
1. 圆角 (border-radius) 和背景色 (background-color) 不生效
- 问题描述：在 iOS 上，某些组件（如
view或text）设置了border-radius和background-color后，圆角或背景色可能不生效。 - 解决方案：
- 使用
overflow: hidden：确保父容器设置了overflow: hidden，这通常可以解决圆角不生效的问题。
.container { border-radius: 10px; background-color: #f0f0f0; overflow: hidden; }- 使用
border属性：在某些情况下，添加border属性可以解决问题。
.container { border-radius: 10px; background-color: #f0f0f0; border: 1px solid transparent; /* 透明边框 */ } - 使用
2. 圆角在 image 组件上不生效
- 问题描述：在 iOS 上，
image组件的border-radius可能不生效。 - 解决方案：
- 使用
cover模式：确保image组件的mode属性设置为cover或aspectFill。
<image src="your-image-url" mode="cover" style="border-radius: 10px;"></image>- 使用
view包裹image：将image组件包裹在一个view中，并在view上设置border-radius和overflow: hidden。
<view style="border-radius: 10px; overflow: hidden;"> <image src="your-image-url" mode="cover"></image> </view> - 使用
3. 背景色在 text 组件上不生效
- 问题描述：在 iOS 上，
text组件的background-color可能不生效。 - 解决方案：
- 使用
view包裹text：将text组件包裹在一个view中，并在view上设置background-color。
<view style="background-color: #f0f0f0;"> <text>Your text here</text> </view> - 使用
4. 圆角和背景色在 list 或 scroll-view 中不生效
- 问题描述：在
list或scroll-view中，子组件的圆角和背景色可能不生效。 - 解决方案：
- 使用
overflow: hidden：确保list或scroll-view的子组件设置了overflow: hidden。
.list-item { border-radius: 10px; background-color: #f0f0f0; overflow: hidden; } - 使用
5. 使用 box-shadow 时圆角不生效
- 问题描述：在 iOS 上，使用
box-shadow时，圆角可能不生效。 - 解决方案：
- 使用
view包裹：将需要设置box-shadow的组件包裹在一个view中，并在view上设置border-radius和overflow: hidden。
<view style="border-radius: 10px; overflow: hidden;"> <view style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);"> <!-- Your content here --> </view> </view> - 使用
6. 使用 position: absolute 或 position: fixed 时圆角不生效
- 问题描述：在 iOS 上，使用
position: absolute或position: fixed时，圆角可能不生效。 - 解决方案：
- 使用
transform：尝试使用transform属性来替代position。
.absolute-element { border-radius: 10px; background-color: #f0f0f0; transform: translate(0, 0); /* 替代 position: absolute */ } - 使用
