Issue with social icons

Site URL: https://interstellar.systems

Hello, I customized the social icons such that when you hover over them the slowly fade to red. They all work perfectly until you click one of them. It takes you to the social site as intended but once you return to my website the smooth transition effect no longer functions and you are instead left with an abrupt shift from white to red. Everything goes back to normal after I clear my history .I have no idea how to fix this.

I achieved the smooth transition result via the CSS below.

.sqs-svg-icon--list {
    a:hover 
  .sqs-use--icon {
        fill: #EF233C !important;
        transition: all .4s linear;
    }
}

.header-actions .icon--fill svg:hover {
fill:#EF233C!important; 
transition: all .4s linear; }

If you used QuickTime Player to record your video, use the Drag to record option if you only need to show a small portion of your screen to demonstrate what you are talking about. Smaller videos mean more people are likely to view them.

For those without QuickTime please try the following.

Please post the site-wide password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

The password is chase0606

I am unable to reproduce your issue. Perhaps someone else can.

It seems to only occur on safari. It works perfectly on chrome. 

I'm am not seeing the issue with Safari.