background-clip text breaks after using this property

I am having an issue with an background-clip:text it breaks after using relative for no reason I can see, text is there but there color is rendered transparent due to the webkit fill color but it's not rendering the text gradient which was expected to be seen after position relative. after removing position relative it works perfect and I need to use it

this is my dummy code:-

So here is my code in 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>

For animation purposes I have to use position: relative, (working in FireFox but not in Google Chrome or Safari)

Here is the 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}

I tried the following:

• Using inherit: all

Using inherit in all

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

I didn't find any interesting answer, so here am I, asking questions.