Linear-gradient na tekście pokazuje się dopiero po zakończeniu animacji w Firefox

pytanie zadane 19 kwietnia 2018 w HTML i CSS przez BT101 Stary wyjadacz (12,540 p.)
edycja 19 kwietnia 2018 przez BT101

Korzystając z całkiem nowego -webkit-background-clip: text; nadaję tekstu nagłówka h1 kolor gradientu tła. Kod SCSS wygląda tak:

.heading-primary {
    font-family: 'Open Sans', sans-serif;
    font-size: 5.6rem;
    font-weight: 300;
    text-transform: uppercase;
    backface-visibility: hidden;
    letter-spacing: .2rem;

    & > span {
        display: inline-block;
        -webkit-background-clip: text;
        color: transparent;
    }
  
    &--left {
        animation: moveInLeft 1s ease-in;
        background-image: linear-gradient(to right, blue, purple);
    }
    &--right {
        animation: moveInRight 1s ease-in;
        background-image: linear-gradient(to right, purple, blue);
    }
}

W nagłówku h1 mam 2 spany oba zawierająca po dwa słowa. Są one tam po to abym mógł je animować lewe dwa słowa z lewej do prawej i dwa prawe słowa z prawej do lewej.

Ogólnie wszystko działa na większości przeglądarek, na których mi zależy ( najnowszy Chrome, Opera i Edge). Niestety w najnowszym Firefoksie kolor tekstu pokazuje się dopiero po zakończeniu animacji.

Próbowałem zdebugować o co chodzi, dodałem do lewych 2 słów czerwone tło i widzę, że tło się przesuwa a dopiero potem, gdy skończy animacje pokazuje kolor tekstu (2 prawe słowa, lewe zakrywa ten czerwony background).

Stworzyłem demo na którym można to zaobserwować, pamiętajcie żeby uruchomić to na najnowszej Mozilli Firefox.

Próbowałem również dodać -moz-background-clip: text; oraz background-clip: text; lecz zupełnie nie zmienia to efektu tego kodu na mozilli.

komentarz 20 kwietnia 2018 przez rafal.budzis Szeryf (85,260 p.)

Gdy wyrzuciłem opacity z animacji zaczeło działac na FF tylko brakuje opacity.

Na mój gust zadziałało by gdybyś przerobił animacje opacity na przejśce (transition) opacity.

PS. bg-clip działał juz w 2011 roku w FF ;) Podaje stronke ktora może nie raz ci pomóc ;)

https://caniuse.com/#search=background-clip

Obecnie nigdzie nie musisz używać prefiksów ;)

komentarz 20 kwietnia 2018 przez BT101 Stary wyjadacz (12,540 p.)

Gdy wyrzuciłem opacity z animacji zaczeło działac na FF tylko brakuje opacity.

Przecież animacja "przesunięcia" działa i z opacity z tym, że nie widać tekstu do momentu zakończenia animacji więc nie widać, że się przesuwa ale się przesuwa co można zauważyć w demo po dodaniu do jednego spana bg-color red;