htmlcssflexboxcss-selectorscss-transitions

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 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.


Solution

  • Don't use relative here.

    Use it while animating with different classes and use webkit fill with idk shade of white or silver.

    Eyes won't not the difference much and it will look cooler.