uni-app 最近几个版本存在 transform 导致变形的问题

uni-app 最近几个版本存在 transform 导致变形的问题

开发环境 版本号 项目创建方式
Mac 11.4 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 时，应用了上述样式的容器会变形


更多关于uni-app 最近几个版本存在 transform 导致变形的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

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

更多关于uni-app 最近几个版本存在 transform 导致变形的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX alpha 3.1.22+ 已修复

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

回复 雨夜敬清秋: 收到

这是一个已知的渲染引擎兼容性问题。在 uni-app 中，当 transform 的初始旋转角度小于 -90 度时，某些平台（特别是 iOS）的渲染引擎会错误计算元素的初始变换矩阵，导致元素显示变形。

临时解决方案：

  1. 将初始角度设为大于等于 -90 度的值，在组件 mounted 后通过 setTimeout 延迟设置实际角度
  2. 使用条件渲染，初始不显示元素，在设置好角度后再显示
  3. 避免在 onLoad 中直接设置大角度变换，改为在 onReady 中设置

示例修改：

onReady() {
  setTimeout(() => {
    this.testDeg = -100
  }, 50)
}
回到顶部