【报Bug】 image 标签使用了 transform: rotate 会导致 border-radius 效果丢失

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 专业版 20H2

HBuilderX类型：正式

HBuilderX版本号： 3.2.16

手机系统： iOS

手机系统版本号： iOS 14

手机厂商：苹果

手机机型： iPhone6 plus

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<view class="imgs">  
<image class="img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a90b5f95-90ba-4d30-a6a7-cd4d057327db/423744c0-5673-4a14-adca-14bd986c3f05.jpg" mode=""></image>  
</view>

<style lang="scss" scoped>  
   .imgs{  
       -webkit-transform: rotate(0deg)   
      box-sizing: border-box;  
      width: 50rpx;  
      height: 50rpx;  
      border-radius: 50rpx;  
      .img{  
                transform: rotate(180deg);   
         box-sizing: border-box;  
         width: 50rpx;  
         height: 50rpx;  
         border-radius: 50rpx;  
         border: 4rpx solid #FFFFFF;  
         overflow: hidden;  
       }  
   }

操作步骤：

示例代码

预期结果：

得到圆形图片

实际结果：

方形的

bug描述：

image 标签使用了 transform: rotate(180deg); 会导致 border-radius 效果丢失。
通过在父组件 view 上加 -webkit-transform: rotate(0deg) 也不行

2021-11-24 21:47 负责人:无分享

1 个回复

DCloud_UNI_Anne

IOS15，iPhone 6s Plus，未复现问题。

该问题目前已经被锁定, 无法添加新回复

【报Bug】 image 标签使用了 transform: rotate 会导致 border-radius 效果丢失

操作步骤：

示例代码

预期结果：

得到圆形图片

实际结果：

方形的

bug描述：

1 个回复

公告

相关问题

【报Bug】 image 标签 使用了 transform: rotate 会导致 border-radius 效果丢失

操作步骤： 示例代码

预期结果： 得到圆形图片

实际结果： 方形的

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

【报Bug】 image 标签使用了 transform: rotate 会导致 border-radius 效果丢失

操作步骤：

示例代码

预期结果：

得到圆形图片

实际结果：

方形的