webkit-background-clip：文本在mozilla上有效，但在chrome上不有效？

Question

我使用webkit-background-clip在后面显示图像，使文本和背景图像达到了3格。

使用我的代码，它可以在firefox上正常工作，但是出于设计目的，在我更改了文本大小（在CSS中使用transform / scale）的情况下，这些转换后的标题部分不适用于chrome，但它们在firefox上有效。我已经使用了span类标签来更改字体的大小，这些部分不是在chrome中显示，而是在Firefox中？

以下示例：

下面是谷歌浏览器示例

所有看起来丢失的部分都带有带有转换的span类标签

    .column-boxes {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        width: 90%;
        margin: 0 auto;
        padding: 36px;
    }

    .column-box {
        height: auto;
        min-height: 300px;
        min-width: 300px;
        max-width: 400px;
        max-height: 400px;
        width: 30%;
        margin: 0 auto 2% auto;
        background-color: #fff;
    }

    .welcome-text {
        color: #888;
        text-align: left;
        font-weight: 200;
        font-size: 4vw;
        width: 100%;
        margin: 0;
        padding-bottom: 36px;
        margin-left: 2.8%;
        /*text-shadow:
                    -1px -1px 0 #f3f3f3,
                    1px -1px 0 #f3f3f3,
                    -1px 1px 0 #f3f3f3,
                    1px 1px 0 #f3f3f3;*/
    }

    /* span for welcome text */

    .welcome-text-clash {
        color: #ccc;
        font-weight: 900;
        letter-spacing: -0.07em;

    }

    /*.box-title {
        font-family: 'Open Sans';
        margin: 0;
        font-weight: 300;
        font-size: 108px;
        color: #fff;
        line-height: 92px;
        text-shadow:
                    -1px -1px 0 #999,
                    1px -1px 0 #999,
                    -1px 1px 0 #999,
                    1px 1px 0 #999;

    }*/

    .box-title-1 {
        font-size: 3.2vw;
        font-family: 'Poppins', sans-serif;
        font-weight: 900;
        word-wrap: break-word;
        letter-spacing: -0.05em;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/fashion-photography-strip-and-stare.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        margin: 0;
        line-height: 2.5vw;
        text-align: center;
    }

    .box-title-2 {
        font-size: 8vw;
        font-family: 'Poppins', sans-serif;
        font-weight: 900;
        word-wrap: break-word;
        letter-spacing: -0.05em;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/kensey-foods-photography-nectarine-tart.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        margin: 0;
        line-height: 6vw;
        text-align: center;
    }

    .box-title-3 {
        font-size: 4.5vw;
        font-family: 'Poppins', sans-serif;
        font-weight: 900;
        word-wrap: break-word;
        letter-spacing: -0.05em;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/imogen-thomas-glass-sculpture.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;
        margin: 0;
        line-height: 3.4vw;
        text-align: center;


    }

    .box-title-1-a {
        display: inline-block;
        font-size: 7.7vw;
        line-height: 6vw;

    }
    .box-title-1-b {
        display: inline-block;
        font-size: 9.6vw;
        line-height: 11.3vw;
        transform: scale(1, 1.6);
        -moz-transform: scale(1, 1.6); /* Firefox */
    }
    .box-title-1-c {
        display: inline-block;
        font-size: 7.5vw;
        line-height: 6.7vw;
        transform: scale(1, 1.2);
        -moz-transform: scale(1, 1.2); /* Firefox */

    }

    .box-title-2-a {
        font-size: 8.1vw;
        line-height: 6.5vw;
    }
    .box-title-2-b {
        font-size: 7.8vw;
        line-height: 6.1vw;
    }
    .box-title-2-c {
        font-size: 10.7vw;
        line-height: 8.2vw;
        margin-left: -1%;
    }

    .box-title-3-a {
        display: inline-block;
        font-size: 10.2vw;
        line-height: 10.2vw;
        transform: scale(1, 1.3);
        -moz-transform: scale(1, 1.3); /* Firefox */

    }
    .box-title-3-b {
        font-size: 7.5vw;
        line-height: 5.1vw;
    }
    .box-title-3-c {
        display: inline-block;
        font-size: 7.5vw;
        line-height: 8vw;
        transform: scale(1, 1.34);
        -moz-transform: scale(1, 1.34); /* Firefox */

    }

    #commercial-box {
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-image: url("http://testsiteclash.co.uk/wp-content/themes/current-build/images/fashion-photography-strip-and-stare.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

<section class="column-boxes">
        <h1 class="welcome-text"><span class="welcome-text-clash">Clash</span> 
    <span style="letter-spacing: -0.09em">&</span><span class="welcome-text- 
    clash">Clash</span>PHOTOGRAPHY</h1>
        <div id="commercial-box" class="column-box">
            <h2 class="box-title-1">COMMERCIAL<span class="box-title-1- 
    a">PHOT</span><br><span class="box-title-1-b">OGR</span><br><span 
    class="box-title-1-c">APHY</span></h2>
        </div>
        <div id="food-box" class="column-box">
            <h2 class="box-title-2">FOOD<span class="box-title-2-a">PHOT</span> 
    <br><span class="box-title-2-b">OGRA</span><br><span class="box-title-2- 
    c">PHY</span></h2>
        </div>
        <div id="product-box" class="column-box">
            <h2 class="box-title-3">PRODUCT<span class="box-title-3- 
    a">PHO</span><br><span class="box-title-3-b">TOGR</span><br><span 
    class="box-title-3-c">APHY</span></h2>
        </div>    
    </section>

任何帮助将不胜感激，因为我已经搜索了2天，现在正在寻找答案，并尝试了各种兼容性，显示错误等等……迷茫了

预先感谢