问题已解决,原因为translate、rotate属性各端适配不同,详情见下方评论。
-------------------------------分割线-----------------------------------------------------
我个人使用uniapp框架开发的微信小程序(开源地址:Github仓库)出现开发者工具中显示正常,iOS端也基本正常(除了动画有点闪动),而安卓端(测试机型:红米Note8、小米11Ultra)则其中的sa-menu组件出现显示错位(见下图),sa-area组件出现点击判定错位的情况。
已尝试:
- 修改sa-menu组件中动态调整的各个尺寸变量为静态的px单位变量;
- 移除sa-menu组件中transition属性;
均无法解决问题,且无任何变化
已排查出问题所在,为translate、rotate、scale这些变换函数必须放在transform属性中使用,否则会出现在微信PC端、微信安卓端、某些浏览器中(例如安卓端chrome浏览器)不生效的情况。
详情可见个人博客文章:小程序开发务必使用transform包裹translate、rotate、scale属性
看数字和+-,感觉是字体问题,导致父级元素宽高不同,中间的元素旋转没有以中心点旋转导致错位
用图片代替文字应该就能解决