安卓端transform: translate(-50%,-50%)无效，IOS端正常
YXW
- 发布：2021-01-19 13:17
- 更新：2021-02-02 15:24
- 阅读：1824
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 10.15.5
HBuilderX类型： 正式
HBuilderX版本号： 3.0.7
手机系统： Android
手机系统版本号： Android 11
手机厂商： OPPO
手机机型： OPPO Find X2
页面类型： nvue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
transform: translate(-50%,-50%)有效
transform: translate(-50%,-50%)有效
实际结果：
transform: translate(-50%,-50%)无效
transform: translate(-50%,-50%)无效
bug描述：
安卓端transform: translate(-50%,-50%)无效，IOS端正常
代码如下：
<view style="position: fixed; top: 500rpx; left: 375rpx; justify-content: center; align-items: center; transform: translateX(-50%); background-color: rgba(0,0,0,0.5);" v-if="toastData">
<view style=" width: 180rpx; border-radius: 16rpx; background-color: rgba(0,0,0,0.6);">
<view style="align-items:center; justify-content: center; width: 180rpx; height: 100rpx;">
</view>
</view>
</view>
toastData = false;
setTimeout(() => {
this.toastData = true;
}, 1000);
YXW (作者)
代码如下
<view style="position: fixed; top: 500rpx; left: 375rpx; justify-content: center; align-items: center; transform: translateX(-50%); background-color: rgba(0,0,0,0.5);" v-if="toastData">
<view style=" width: 180rpx; border-radius: 16rpx; background-color: rgba(0,0,0,0.6);">
<view style="align-items:center; justify-content: center; width: 180rpx; height: 100rpx;">
</view>
</view>
</view>
YXW (作者)
代码：
<view style="position: fixed; top: 500rpx; left: 375rpx; justify-content: center; align-items: center; transform: translateX(-50%); background-color: rgba(0,0,0,0.5);">
<view style=" width: 180rpx; border-radius: 16rpx; background-color: rgba(0,0,0,0.6);">
<view style="align-items:center; justify-content: center; width: 180rpx; height: 100rpx;">
</view>
</view>
</view>
小菜啊 - 业精于勤荒于嬉
需要做兼容处理
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
问题已确认，临时解决方案，给指定transform 的view 显性指定宽高
<view style="position: fixed; top: 500rpx; left: 375rpx; justify-content: center; align-items: center;
width: 180rpx; height:100rpx;
transform: translateX(-50%); background-color: rgba(0,0,0,0.5);"
v-if="toastData">
<view style=" width: 180rpx; border-radius: 16rpx; background-color: rgba(0,0,0,0.6);">
<view style="align-items:center; justify-content: center; width: 180rpx; height: 100rpx;">
</view>
</view>
</view>
