雨夜敬清秋
雨夜敬清秋
  • 发布:2021-06-28 14:44
  • 更新:2021-07-07 20:16
  • 阅读:386

【报Bug】最近的几个版本都存在 transform 导致变形的问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.18

手机系统: 全部

手机厂商: 华为

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

all

示例代码:
<template>  
    <view class="content">  
    <button type="default" class="action" @tap="handleTest">点击这里测试</button>  
    <image  
      src="/static/logo.png"  
      mode="widthFix"  
      class="box"  
      :style="{  
        width: '50px',  
        height: '50px',  
        transform: `rotate(${testDeg}deg)`,  
        transitionDuration: '1s'  
      }"  
      ></image>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
        testDeg: 0  
            }  
        },  
        methods: {  
      handleTest () {  
        this.testDeg -= 10  
        console.log('testDeg', this.testDeg)  
      }  
        },  
    onLoad () {  
      this.testDeg = -100  
    }  
    }  
</script>  

<style lang="scss" scoped>  
  .content {  
    flex: 1;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
  }  
  .box {  
    transition: transform cubic-bezier(.34, .12, .05, .95);  
  }  
  .action {  
    position: absolute;  
    left: 0;  
    right: 0;  
    top: 0;  
  }  
</style>  

操作步骤:

请看运行附件中的示例项目

预期结果:

不变形

实际结果:

变形

bug描述:

style 样式 transform: rotate(${testDeg}deg)
当 testDeg 的初始值小于 -90 时,应用了上述样式的容器会变形

2021-06-28 14:44 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

问题复现,后续优化,已加分,感谢您的反馈!

DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 3.1.22+ 已修复

  • 雨夜敬清秋 (作者)

    好的,测试后确认修复,并发现了新的问题,ctx.measureText 在 for 循环中,第一个 text 的 width 始终是 null,该问题在安卓端可复现,https://ask.dcloud.net.cn/question/126609

    2021-07-08 09:25

  • DCloud_UNI_GSQ

    回复 雨夜敬清秋: 收到

    2021-07-08 10:45

要回复问题请先登录注册