uni-app nvue 安卓开启隐私政策privacy template后，所有阴影失效，严重影响体验

uni-app nvue 安卓开启隐私政策privacy template后，所有阴影失效，严重影响体验

示例代码：

<template>  
  <view class="content">  
    <view class="shadow"></view>  
  </view>  
</template>  

<style>  
  .content {  
    flex: 1;  
    align-items: center;  
    justify-content: center;  
    background: #f5f5f5;  
  }  

  .shadow {  
    width: 200rpx;  
    height: 200rpx;  
    background: #fff;  
    border-radius: 20rpx;  
    box-shadow: 0 0 16rpx 0 rgb(227, 227, 227);  
  }  
</style>

操作步骤：

  1. 配置 app-plus.privacy 为 template
  2. nvue 页面中包含阴影，然后使用云打包

预期结果：

  • 阴影显示正常

实际结果：

  • 阴影显示不正常

bug描述：

根据 https://ask.dcloud.net.cn/article/36937 配置 Android平台隐私与政策提示框 后， nvue 所有阴影显示异常，本地调试正常，云打包后异常，页面是 nvue

源码，安装包，截屏见附件

nvue-box-shadow.zip

_UNI__9F058ED__20210629100810.apk.zip


更多关于uni-app nvue 安卓开启隐私政策privacy template后，所有阴影失效，严重影响体验的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

@DCloud_Android_DQQ @DCloud_Android_ST 老哥麻烦看看

更多关于uni-app nvue 安卓开启隐私政策privacy template后，所有阴影失效，严重影响体验的实战教程也可以访问 https://www.itying.com/category-93-b0.html


android平台的box-shadow是存在一些问题。所以提供了elevation 或者使用图片效果实现阴影。 elevation具体参考https://uniapp.dcloud.io/nvue-css?id=android-box-shadow

elevation 测试过了， 完全达不到设计要求…要么太深，要么太小

回复 青阳_1900: 那只能等等了 目前还没有找到最优方案

回复 DCloud_Android_ST: 其实主要问题是为什么配置了privacy云打包后有问题，只要不配置 privacy 就没问题。就很奇怪

回复 青阳_1900: box-shadow存在不少诡异问题你还没遇到而已。不推荐使用box-shadow

回复 DCloud_Android_ST: 老哥，麻烦看下这个问题能不能上升推动一下，首先如果不配置隐私政策的话，安卓下绝大部分显示都是正常的，但是开启后云打包出来的app显示就异常了。其他我不要求，配置隐私政策不应该影响阴影的显示这个逻辑没问题吧

这是一个已知的兼容性问题。在Android平台启用隐私政策模板后，nvue页面的box-shadow确实会出现渲染异常。

目前可行的解决方案是：

  1. 使用背景图片替代阴影 将阴影效果制作成带透明度的PNG图片，通过background-image实现

  2. 使用border模拟阴影效果

    .shadow {
  border: 1rpx solid #e3e3e3;
}
回到顶部