uni-app中如果A页面有子页面B的话 A页面的每个盒子不能同时设置border-radius和box-shadow属性

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

操作步骤：

如果A页面，有子页面B的话，在A这个页面的每一个盒子都不能同时设置“border-radius”和“box-shadow”属性，否则，跳转到子页面B后，子页面B就会出闪烁且能在B页面能看到A页面的内容的问题

预期结果：

想在A页面的某个盒子上加上一个圆角和阴影

实际结果：

在A页面的圆角和阴影是正常的，但如果从A页面的加了阴影的盒子跳转到B页面，那么在B页面就可以看到A页面的内容。

bug描述：

A页面

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title" @click="tologin">{{title}}</text> <!-- 我的父级盒子不能同时设置 “border-radius”和“box-shadow”属性 -->  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: '登录'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            tologin(){  
                uni.navigateTo({  
                    url:'../login/login'  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  

        border-radius: 10rpx;  
        box-shadow: 0 1px 2px #f3f3f3;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  

        /* border-radius: 10rpx;  
        box-shadow: 0 1px 2px #f3f3f3; */  
    }  

    .text-area {  
        justify-content: center;  
        align-items: center;  
        background-color: #2C405A;  
        width: 500rpx;  
        height: 200rpx;  

        /* border-radius: 10rpx;  
        box-shadow: 0 1px 2px #f3f3f3; */  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

B页面

<template>  
    <view class="login">  
        <text>我是登录页</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="scss">  
    .login{  
        height: 300rpx;  
        justify-content: center;  
        align-items: center;  
    }  
</style>

更多关于uni-app中如果A页面有子页面B的话 A页面的每个盒子不能同时设置border-radius和box-shadow属性的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼

Android平台weex对阴影样式(box-shadow)支持不完善，如设置圆角边框时阴影样式显示不正常、设置动画时在Android7上显示不正常、在Android10上出现闪烁现象等。
为解决这些问题，从HBuilderX 2.4.7起，新增elevation属性（组件的属性，不是css样式）设置组件的层级，Number类型，层级值越大阴影越明显，阴影效果也与组件位置有关，越靠近页面底部阴影效果越明显
详情：点此打开链接

songsunli 2楼

可以看看这两个问题吗？ https://ask.dcloud.net.cn/question/112177 https://ask.dcloud.net.cn/question/112175

gougou168 3楼

这是一个已知的uni-app在部分平台上的渲染问题。当父页面同时设置border-radius和box-shadow时，在页面跳转时可能会出现页面内容残留或闪烁现象。

解决方案是：

避免在需要跳转的页面同时使用这两个样式属性
可以使用伪元素来模拟阴影效果
或者改用背景渐变来替代阴影效果

对于你的代码，可以修改.content的样式为：

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10rpx;
    /* 移除box-shadow */
}

/* 使用伪元素模拟阴影 */
.content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10rpx;
    box-shadow: 0 1px 2px #f3f3f3;
    z-index: -1;
}