Miss丶盟
Miss丶盟
  • 发布:2024-01-09 19:03
  • 更新:2024-01-10 19:58
  • 阅读:289

【报Bug】当滚动区域的高度大于等于视口高度(100%或100vh)时,弹出层中的canvas绘制错位

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.7

第三方开发者工具版本号: 1.06.2308310

基础库版本号: 3.3.1

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="app-container">  
        <view v-for="item in 20" :key="item" class="warp-item" @click="open">  
            占位元素  
        </view>  
        <uni-popup ref="popup" type="bottom" background-color="#FFFFFF">  
            <canvas canvas-id="my-canvas" class="my-canvas"></canvas>  
        </uni-popup>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  
            const context = uni.createCanvasContext("my-canvas", this)  
            context.setStrokeStyle("#00ff00")  
            context.setLineWidth(5)  
            context.rect(0, 0, 200, 200)  
            context.stroke()  
            context.setStrokeStyle("#ff0000")  
            context.setLineWidth(2)  
            context.moveTo(160, 100)  
            context.arc(100, 100, 60, 0, 2 * Math.PI, true)  
            context.moveTo(140, 100)  
            context.arc(100, 100, 40, 0, Math.PI, false)  
            context.moveTo(85, 80)  
            context.arc(80, 80, 5, 0, 2 * Math.PI, true)  
            context.moveTo(125, 80)  
            context.arc(120, 80, 5, 0, 2 * Math.PI, true)  
            context.stroke()  
            context.draw()  
        },  
        methods: {  
            open() {  
                this.$refs.popup.open()  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
    .app-container {  
        height: 100vh;  
        background-color: #CCCCCC;  
        overflow-y: auto;  

        .warp-item {  
            height: 100rpx;  
            background-color: #FFFFFF;  
            margin-bottom: 10rpx;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
        }  

        .my-canvas {  
            width: 100%;  
            height: 500rpx;  
        }  
    }  
</style>

操作步骤:

滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug

预期结果:

滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug

实际结果:

滑动列表,滚动到中间或底部,然后点击占位元素,弹窗中的canvas绘制出现偏移,只在真机中存在问题,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug

bug描述:

当滚动区域的高度大于等于视口高度(100%或100vh),滚动列表后,popup组件中的canvas绘制出现了偏移,且只在真机出现,开发者工具正常展示,修改.app-container的高度为height: calc(100vh - 1px);即可解决问题,不知道是否属于bug

2024-01-09 19:03 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

我测试了你提供的代码,的确有这个 canvas 漂移的问题,真机调试发现 canvas 元素本身的位置是正确的,但实际回执的位置不对。

使用新版本的 canvas 写法,弹窗后重新绘制,位置是正常的,怀疑是微信旧版的 canvas 处理不当。

  • Miss丶盟 (作者)

    好的,感谢反馈,我这边试一下新版写法看看

    2024-01-17 09:26

Miss丶盟

Miss丶盟 (作者)

这是bug复现的代码包

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈。我验证下你提供的代码

要回复问题请先登录注册