收藏
回答

cover-view在canvas上定位的bug

API/组件名称 终端类型 微信版本 基础库版本
cover-view 客户端 最新 最新

预期是想在canvas上做一个关闭的小叉,在右上角;

当我用第一种方式写的时候,所有ios出现了定位偏差的问题,安卓没有

一、wxml:

<view class='canvasCon' style="width:670rpx;height:850rpx" catchtap='closecanvas2'>

    <canvas canvas-id="myCanvas" class="canvas">

        <cover-view bindtap='closecanvas' class="canvasView">

            <cover-image class="canvasImg" src="https://cms.hylpz.cn/data/images/common/close.png"/>

        </cover-view>

    </canvas>

    <view class="canvasButton" catchtap='canvasToTempFilePath'>保存图片</view>

</view>

..

wxss:

.page .canvasBox .canvasCon{

    top: 50%;

    left: 50%;

    margin-left: -335rpx;

    margin-top: -500rpx;

    position: relative;

    border-radius: 20rpx;

    z-index: 999;

    background: #fff;

}

.page .canvasBox .canvasCon .canvasView{

    display: block;

    width: 44rpx;

    height: 44rpx;

    position: absolute;

    top:20rpx;

    right: 20rpx;

    z-index: 1000;

}

安卓展示:


ios展示:


于是我想个办法解决这个问题,就是把 <cover-view>拿出来,不放在canvas标签里;

二、wxml:

<view class='canvasCon' style="width:670rpx;height:850rpx" catchtap='closecanvas2'>

    <canvas canvas-id="myCanvas" class="canvas">

    </canvas>

    <view class="canvasButton" catchtap='canvasToTempFilePath'>保存图片</view>

    

    <cover-view bindtap='closecanvas' class="canvasView">

        <cover-image class="canvasImg" src="https://cms.hylpz.cn/data/images/common/close.png"/>

    </cover-view>

</view>

..

wxss不变

结果是一部分ios可以正常显示,而iP6s上cover-view没有canvas层级高,被压在下面导致不显示,

所以请问有什么办法解决?




回答关注问题邀请回答
收藏

7 个回答

  • 黄思程
    黄思程
    2018-01-19

    用你的代码发现是乱的,能否提供一个完整的

    2018-01-19
    有用
    回复
  • 黄思程
    黄思程
    2018-01-19

    第二种方法可以把cover-view稍微延迟一下再显示

    2018-01-19
    有用
    回复
  • 黄思程
    黄思程
    2018-01-12

    图中哪一块是canvas?

    2018-01-12
    有用
    回复 1
    • 沈喬喬
      沈喬喬
      2018-12-26

      同样遇到这个问题,部分手ios手机偶尔出现这中bug,请问官方解决了没有

      2018-12-26
      回复
  •  
     
    2018-01-20

    好的,谢谢!

    2018-01-20
    有用
    回复
  •  
     
    2018-01-16

    官方是否已经复现了这个情况!

    2018-01-16
    有用
    回复
  •  
     
    2018-01-15

    请问有什么解决办法

    2018-01-15
    有用
    回复
  •  
     
    2018-01-15

    那个底色白色的部分是canvas

    2018-01-15
    有用
    回复
登录 后发表内容