Android/Chrome是否完全支持背景剪辑CSS属性？在PC和Mac上的FF/Chrome中工作正常

Question

我有一些文本，我正在应用一个背景图像，以使用‘背景剪辑’属性作为填充显示。这个效果适用于Mac和PC上的Firefox和chrome，但在使用Chrome的android设备上，我唯一要测试的是，文字是“there”，意思是我可以触摸屏幕，它会高亮显示，但效果不在那里，使它看起来“看不见”。文本在画布上进行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

显然，它不受支持。