机车圈
机车圈
  • 发布:2022-11-22 15:46
  • 更新:2022-11-24 00:00
  • 阅读:296

【报Bug】安卓nvue 图片圆角 border-radius 会导致图片失帧

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.0

HBuilderX类型: 正式

HBuilderX版本号: 3.6.10

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: mi11

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

border-radius: 20px;

预期结果:

图片显示正常

实际结果:

图片显示丢帧模糊

bug描述:

安卓系统,nvue 下图片设置了圆角 border-radius 会导致图片失帧,这个问题说了多少遍了,都这么久了官方也不解决一下,这么严重的问题!!!

2022-11-22 15:46 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

请提供下demo示例 我这边验证下

  • 机车圈 (作者)

    <template>

    <view class="content" style="flex: 1;">


        <image mode="aspectFill" style="border-radius: 10px;width: 300rpx;height: 400rpx;" src="https://image2.hzmodi.cn/a/93958da135dd075a3b2ca0f8f20b2654.jpeg"></image>  

    <image mode="aspectFill" style="width: 300rpx;height: 400rpx;" src="https://image2.hzmodi.cn/a/93958da135dd075a3b2ca0f8f20b2654.jpeg"></image>

    </view>

    </template>


    <script>

    export default {

    data() {

    return {

    title: 'Hello'

    }

    },

    onLoad() {


        },  
    methods: {

    }
    }

    </script>


    <style>

    .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    }


    .logo {  
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
    }

    .text-area {
    display: flex;
    justify-content: center;
    }

    .title {
    font-size: 36rpx;
    color: #8f8f94;
    }

    </style>

    2022-11-22 16:25

  • 机车圈 (作者)

    demo示例在下面发您了

    2022-11-22 16:27

  • 机车圈 (作者)

    nvue 只要设置了圆角同时设置了宽和高,图片就一定有问题

    border-radius: 10px;

    width: 300rpx;

    height: 400rpx;

    2022-11-22 16:30

机车圈

机车圈 (作者)

demo示例,只要给了高度就会模糊

机车圈

机车圈 (作者)

这个是我加了圆角的截图,仔细看加了圆角之后线是断的,我看有好几个人反馈了图片圆角会损失画质的问题,希望这个问题重视一下处理一下

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