canvas无法被cover-view覆盖

[HIKALU-Z]

开发环境：

• 小程序开发软件版本1.03
• echart-wx版本为uniapp官方市场版本
• 基础库版本2.11.3

问题描述

• 使用canvas（2d）的时候cover-view无法遮盖住 （使用延时加载cover-view的方案也无效）。
• 改为强制使用旧版本的canvas就可以被覆盖

[Zhuyi731]

可以提供下具体的代码吗

[HIKALU-Z]

navbar 部分

<template>
  <cover-view class="prohibition">
    <cover-view
      class="demo"
      :style="
        'height:' +
        demo.sum +
        'px;' +
        'padding-top:' +
        demo.top +
        'px;padding-bottom:10rpx'
      "
    >
      <!-- <cover-view class="left" :style="'top:' + demo.top + 'px'">
        <cover-view class="cuIcon-homefill"></cover-view>
      </cover-view> -->
      <cover-view class="nav-container">
        <cover-view class="nav-icon" @click="handleClick">
          <cover-image
            class="calendar"
            src="./../../static/img/statistics/calendar.png"
            mode="scaleTofill"
          ></cover-image>
        </cover-view>
        <cover-view class="text">{{ title }}</cover-view>
      </cover-view>
    </cover-view>
    <cover-view
      :style="
        'height:' +
        demo.sum +
        'px;' +
        'padding-top:' +
        demo.top +
        'px;padding-bottom:10rpx;' +
        'box-sizing:border-box'
      "
    ></cover-view>
  </cover-view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default() {
        return "数据统计";
      },
    },
  },
  data() {
    return {
      demo: {
        top: 0,
        height: 0,
        sum: 0,
      },
    };
  },
  created() {
    const demo = uni.getMenuButtonBoundingClientRect();
    console.log(demo);
    this.demo.top = demo.top;
    this.demo.height = demo.height;
    this.demo.sum = demo.top + demo.height + 10;
  },
  methods: {
    handleClick(e) {
      console.log(e);
      this.$emit("calendar-handler", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.prohibition {
  position: relative;
  z-index: 999999;
}
.demo {
  width: 100%;
  position: fixed;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
  color: #ffffff;
  font-size: 26rpx;
  box-sizing: border-box;
  .left {
    float: left;
    /* position: absolute;
    width: max-content;
    height: max-content; */
    top: 0;
    bottom: 0;
    left: 20rpx;
    margin: auto;
    .iconfont {
      color: #3c3c3c;
    }
  }
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    .nav-icon {
      position: absolute;
      left: 16px;
      width: 25px;
      height: 25px;
      .calendar {
        width: 25px;
        height: 25px;
      }
    }
    .text {
      font-size: 32rpx;
    }
  }
}
</style>

<view class="record-container">
      <uni-calendar
        ref="calendar"
        :insert="false"
        :lunar="true"
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
      />
      <view class="main-container">
        <view class="btn-group">
          <view class="btn-dataset active">日报</view>
          <view class="btn-dataset">月报</view>
          <view class="btn-dataset">年报</view>
        </view>
        <view class="chart-wrapper">
          <uni-ec-canvas
            class="uni-ec-canvas"
            id="uni-ec-canvas"
            ref="uni-ec-canvas"
            canvas-id="uni-ec-canvas"
            force-use-old-canvas="true"
            :ec="ec"
          ></uni-ec-canvas>
       </view>
</view>

option 部分

 ec: {
        option: {
          color: ["#4880FF", "#FF6666", "#00C888", "#4880FF", "#8466FF"],
          grid: {
            left: 40,
            top: 30,
            bottom: 30,
            right: 20,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["1:10", "2:20", "3:30", "4:40", "5:50", "6:30", "7:45"],
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(255,255,255,0.12)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: "line",
              smooth: true,
              symbol: "none", //取消折点圆圈
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(72,128,255,0.05)", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(72,128,255,0.4)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        }, //echart 配置项
      },

canvas的部分css，其他的地方你可以忽略，只实验canvas的部分就行。代码有疏漏你可以删除无关代码

   .chart-wrapper {
      width: 100%;
      height: 210px;
      .uni-ec-canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

[Zhuyi731]

你真机上也会出现被覆盖吗？ https://developers.weixin.qq.com/community/develop/doc/0002ee016e0d20767ff97105956800

[HIKALU-Z]

谢谢。昨天在真机上看是正常的，所以我也被搞蒙了。谢谢。有问题我继续跟进

[Zhuyi731]

官方bug https://developers.weixin.qq.com/community/develop/doc/0002ee016e0d20767ff97105956800