Android/Chrome 是否完全支持 background-clip CSS 属性？在 PC 和 Mac 上的 FF/Chrome 中运行良好

Question

我有一些文本，我正在使用“背景剪辑”属性应用背景图像以显示为填充。这种效果在 Mac 和 PC 上的 Firefox 和 Chrome 中有效，但在使用 chrome 的 android 设备上有效，我唯一需要测试的是，文本是“那里”意味着我可以触摸屏幕并且它突出显示但效果不存在出现“隐形”。文本在画布上以 Z 为索引，在桌面浏览器中看起来也很好。关于为什么 android/chrome 渲染不一样的任何想法？

附：我不能只用笔把这一部分分开，所以请参阅附加代码：

HTML

<div id="light-intro-wrapper">
<div id="light-intro">THIS IS<br>
  TEXT <br>
  <a class="down_block go" href="#content_a"><i class="fa fa-arrow-down"></i></a> </div>
<div id="3d-graph">
  <div style="position: relative;">
    <div>
      <div style="position: relative;">
        <div class="scene-nav-info" style="display: none;">Left-click: rotate, Mouse-wheel/middle-click: zoom, Right-click: pan</div>
        <div class="scene-tooltip">&nbsp;</div>
        <canvas height="958" style="width: 1920px; height: 958px;" width="1920"></canvas>
      </div>
    </div>
    <div class="graph-info-msg">&nbsp;</div>
  </div>
</div>
<div id="content_a">&nbsp;</div>

CSS

canvas#canvas {
    display: block;
    letter-spacing: 0.2rem;
    margin: 0;
    padding: 0;
    color: #FFF;
    overflow: hidden;
    z-index: 0;
    position: absolute;
    width: 100%;
}

#light-intro {
    height: 200px;
    background: url("image.jpg");
    z-index: 9999;
    position: absolute;  
    width: 50%;
    display: table-cell;
    vertical-align: top;
    font-family: 'Nunito Sans',sans-serif;
    font-weight: 900;
    font-size: 7vh;
    line-height: 1em;
    margin: 0 auto;
    margin-top: 400px;
    top: 0px;
    color: transparent;
    right: 25%;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
}


.down_block {
    border-radius: 50%;
    display: flex;
    height: 55px;
    left: 50%;
    margin-left: -17px;
    opacity: 1;
    position: absolute;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease 0s;
    width: 55px;
    z-index: 999;
    background: #FFF url("http://chrismccormick.com/wp-content/uploads/cellular.jpg");
    font-size: 3vw;
    margin-top: 20px;
    background-clip: text;
    -webkit-background-clip: text;
    text-align: center;
    background-size: cover;
}

.go {
    color: transparent;
}

编辑：清理标记/CSS

合十礼 -mk

Answer 1

显然不支持。