我有一个背景剪辑的问题：文本它打破后，使用相对没有理由，我可以看到，文本在那里，但有颜色渲染透明，由于webkit填充颜色，但它没有渲染文本梯度，这是预期后，位置相对。删除后，位置相对它的工作完美，我需要使用它
这是我的虚拟代码：-
下面是我在HTML中的代码：

<h3 class="colormanager">
    <span class="animation_control_js">
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
        <div class="internaltext">X</div>
    </span>
</h3>

出于动画的目的，我必须使用position: relative，（在FireFox中工作，但不在Google Chrome或Safari中工作）
下面是CSS：

.internaltext{
    position: relative;
}

.colormanager {
    font-family:, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 600;
    position: relative;
    top: 0;
    white-space: none;
    margin-top: 15px;
    color:transparent;
    background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    padding-left: 20px
}

我尝试了以下方法：

• 使用inherit: all

在所有

color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

我没有找到任何有趣的答案，所以我在这里，问问题。