uni-app ios css3动画下 rpx出现异常

uni-app ios css3动画下 rpx出现异常

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

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

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.2.0

手机系统：

iOS

手机系统版本号：

iOS 14

手机厂商：

苹果

手机机型：

果x

页面类型：

nvue

vue版本：

vue2

打包方式：

云端

项目创建方式：

HBuilderX

App下载地址或H5网址：

https://m.feidanart.com/testfile/2a5b7833fa024849ea19d43fa37e5813.mp4

示例代码：

<template>  
    <view>  
        <view style="height: 50px;"></view>  
        pxH: {{pxH}} -- rpxH: {{ rpxH }}  
        <view style="flex-direction: row; width: rpx;">  
            <view @tap="changeHeight" class="asd" :style="{ height: rpxH + 'rpx' }"></view>  
            <view @tap="changeHeight" class="asd" :style="{ height: pxH + 'px', backgroundColor: 'blue' }"></view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                pxH: uni.upx2px(200),  
                rpxH: 200,  
            }  
        },  
        methods: {  
            changeHeight() {  
                this.pxH += uni.upx2px(200)  
                this.rpxH += 200  
                console.log(this.pxH, this.rpxH)  
            }  
        },  
    }  
</script>  
<style scoped lang="scss">  
    .asd {  
        background-color: red;  
        width: 300rpx;  
        transition-property: height;  
        transition-duration: 200;  
        /* #ifdef H5 */  
        transition: .2s  
        /* #endif */  
    }  
</style>

操作步骤：

点击红块,看红块高度变化

预期结果：

红块应该每次点击增长100rpx

实际结果：

红块每次点击增长100px应该

bug描述：

在css3动画下,ios的rpx无效,变为px效果


更多关于uni-app ios css3动画下 rpx出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

HBuilderX 3.2.13alpha， IOS15 iPhone 6s Plus，未复现问题。仅这个设备出现问题吗？其他设备是否正常？

更多关于uni-app ios css3动画下 rpx出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我上传了视频附件,果x,3.2.13alpha异常,把transition-duration设置为0就正常,安卓和h5正常

https://m.feidanart.com/testfile/2a5b7833fa024849ea19d43fa37e5813.mp4

回复 安灬: 试下HBuilderX 3.2.13alpha是否正常？

回复 DCloud_UNI_Anne: 视频里面用的就是3.2.13alpha

回复 安灬: 换其他设备试试

这是一个已知的nvue在iOS上的渲染问题。在iOS平台上，当使用CSS3动画（特别是transition）时，nvue页面中的rpx单位在动画过程中会被错误地解析为px单位。

从你的视频和代码可以看出：

  1. 两个view初始高度都是200rpx（通过uni.upx2px转换后约为100px）
  2. 点击后，使用rpx单位的view高度变化明显大于使用px单位的view
  3. 这是因为iOS在动画过程中将rpx直接当作px处理，导致实际高度变化了200px而不是预期的200rpx

解决方案：

  1. 推荐方案：使用px单位 在动画相关的样式中避免使用rpx，改用px单位：

    // 在data中预先转换
data() {
    return {
        pxH: uni.upx2px(200),
    }
}
// 在模板中使用
:style="{ height: pxH + 'px' }"

  2. 使用条件编译 针对iOS平台单独处理：

    .asd {
    /* #ifdef APP-IOS */
    width: 300px; /* 使用转换后的px值 */
    /* #endif */
    /* #ifndef APP-IOS */
    width: 300rpx;
    /* #endif */
}
回到顶部