CSS Transform/Transition not working on Safari

Question

The following CSS works to animate a couple of listed items I have on this page:

https://startup.buscoajack.com/homepage-aurelie/

selector {
     display: flex;
}
 #primary li a {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
     background-size: 200% 100%;
     background-position: -100%;
     -webkit-transition: all 0.3s ease-in-out;
    -transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
}
 #primary li a:before {
     display: block;
     content: '';
     width: 0;
     height: 3px;
     bottom: 5px;
     left: 0;
     bottom: -3px;
     z-index: 0;
     position: absolute;
     background: #000;
      -webkit-transition: all 0.3s ease-in-out;
    -transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
}
 #primary li a:hover {
     background-position: 0%;
}
 #primary li a:hover:before {
     width: 100%;
}

Unfortunately it doesn't appear on Safari :/. Could anybody indicate why this is happening and a possible solution? I'd really appreciate any help or hints!

Thanks, Jack

I've also updated the CSS to not include "transition: all" as it appears to be an issue for Safari, but it doesn't seem to have fixed the issue:

selector {
     display: flex;
}
 #primary li a {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
     background-size: 200% 100%;
     background-position: -100%;
     -webkit-transition: 0.3s ease-in-out;
    -transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
     
}
 #primary li a:before {
     display: block;
     content: '';
     width: 0;
     height: 3px;
     bottom: 5px;
     left: 0;
     bottom: -3px;
     z-index: 0;
     position: absolute;
     background: #000;
      -webkit-transition: 0.3s ease-in-out;
    -transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
}
 #primary li a:hover {
     background-position: 0%;
}
 #primary li a:hover:before {
     width: 100%;
}

Answer 1

Sorry, but don't have safari to check if it's work:

selector {
    display: flex;
}
#primary li a {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
    background-size: 200% 100%;
    background-position: -100%;
    -webkit-transition: background-position 0.3s ease-in-out;
    -transition: background-position 0.3s ease-in-out;
    transition: background-position 0.3s ease-in-out;
    -o-transition: background-position 0.3s ease-in-out;
    -moz-transition: background-position 0.3s ease-in-out;
}
#primary li a:before {
    display: block;
    content: '';
    width: 0;
    height: 3px;
    bottom: 5px;
    left: 0;
    bottom: -3px;
    z-index: 0;
    position: absolute;
    background: #000;
    -webkit-transition: width 0.3s ease-in-out;
    -transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
}
#primary li a:hover {
    background-position: 0%;
}
#primary li a:hover:before {
    width: 100%;
}