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%;
}

Hi @designer132. I've had a read through and if I understand correctly, your suggestion is changing: transition: all 0.3s ease-in-out; with: transition: color 0.3s ease-in-out; I've done so, but sadly it does not fix the issue, and what's more, it changes the transition design which is undesirable. If I've misunderstood, please let me know more specifically your suggestion to implement and test it. Thank you for your help!! — Grabgooglesgoogles, May 20 '22 at 08:54
You need to change the all parameter to whatever you need for the current animation. For example: `#primary li a{ transition: background-position 0.3s ease-in-out; }` `#primary li a:before { transition: width 0.3s ease-in-out; }` if you would like to animate multiple parameters, you can combine them `transition: width 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.1s ease-in-out;` — designer132, May 21 '22 at 09:45
here u have more info @Grabgooglesgoogles : https://www.w3schools.com/css/css3_transitions.asp — designer132, May 21 '22 at 09:54
thanks @designer132 that's really useful. I've never used this CSS before, and I've tried removing the all command but it doesn't have any effect on Safari. Perhaps I'm doing it wrong? I've pasted the updated code in the original post. I'd be tremendously grateful if you'd have a look for me and point me in the right direction. Jack — Grabgooglesgoogles, May 24 '22 at 14:43

score 0 · Answer 1 · answered May 25 '22 at 09:58

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%;
}

thank you for doing this. I tried this CSS code (and now understand what you mean about adding a different property which is not 'all'). Unfortunately this still hasn't worked so I'm a bit stumped. Any other ideas? :/ Image: https://drive.google.com/file/d/1dxqWGHkrClfA8nayGkBIXI9a-d6Plps1/view?usp=sharing — Grabgooglesgoogles, May 27 '22 at 08:35

CSS Transform/Transition not working on Safari

1 Answers1