【报Bug】canvas 使用 cover-view 嵌套 cover-view 时边框属性异常

分类：uni-app

bug反馈 coverview

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型：正式

HBuilderX版本号： 3.4.15

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型：小米8

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

    <view>  
        <canvas canvas-id="master" id="canvas" :style="style">  
            <cover-view class="cover-view">  
                <!-- 角线 -->  
                <cover-view class="touch-area left top"></cover-view>  
                <cover-view class="touch-area right top"></cover-view>  
                <cover-view class="touch-area left bottom"></cover-view>  
                <cover-view class="touch-area right bottom"></cover-view>  

                <!-- 辅助线 -->  
                <cover-view class="pa line-vertical-one"></cover-view>  
                <cover-view class="pa line-vertical-two"></cover-view>  
                <cover-view class="pa line-horizontal-one"></cover-view>  
                <cover-view class="pa line-horizontal-two"></cover-view>  
            </cover-view>  
        </canvas>  
    </view>

#canvas{  
        border: 1rpx solid white;  
    }  
    .pa{  
        position: absolute;  
        background-color: white;  
    }  
    .cover-view{  
        width: 100%;  
        height: 100%;  
        position: relative;  
        padding: 0;  
        border: 2px solid yellow;  
        box-sizing: border-box;  
        .touch-area{  
            width: 50rpx;  
            height: 50rpx;  
            position: absolute;  
            background-color: yellow;  
            box-sizing: border-box;  
        }  
        .left{  
            border-left: 20px solid red;  
            left: 0;  
        }  
        .top{  
            border-top: 20px solid red;  
            top: 0;  
        }  
        .right{  
            border-right: 20px solid red;  
            right: 0;  
        }  
        .bottom{  
            border-bottom: 20px solid red;  
            bottom: 0;  
        }  
        .line-vertical-one{  
            width: 1px;  
            left: 33.3%;  
            height: 100%;  
        }  
        .line-vertical-two{  
            width: 1px;  
            left: 66.7%;  
            height: 100%;  
        }  
        .line-horizontal-one{  
            height: 1px;  
            top: 33.3%;  
            width: 100%;  
        }  
        .line-horizontal-two{  
            height: 1px;  
            top: 66.7%;  
            width: 100%;  
        }  
    }

操作步骤：

具体看vue页面

预期结果：

手机端显示效果跟H5端一样

实际结果：

边框颜色异常

bug描述：

做一个图片剪裁的功能图片剪裁辅助框在canvas上使用cover-view组件嵌套cover-view绘制辅助线,H5 效果正常看图1 但是手机上没有边框对比手机图1 (图片插入不了)


.touch-area{  
            width: 50rpx;  
            height: 50rpx;  
            position: absolute;  
            background-color: yellow;  
            box-sizing: border-box;  
        }  
        .left{  
            border-left: 20px solid red;  
            left: 0;  
        }  
        .top{  
            border-top: 20px solid red;  
            top: 0;  
        }  
        .right{  
            border-right: 20px solid red;  
            right: 0;  
        }  
        .bottom{  
            border-bottom: 20px solid red;  
            bottom: 0;  
        }
```  对边框醒目处理之后 可以看到 没有边框 但是有黑色的区域间隔 可能是边框没有上色  使用!important 也无效