Animation with Problem in Safari

Question

A while ago I realized that in Safari animations work in a different way.

For example, if we have a text inside a span and we want the hover the letters of this text diminish 1px, we put letter-spacing: -1px;. Putting a transition: all 0.5 ease;, in the Chrome and Firefox work smoothly.

But in the Safari, this happens abruptly, ignoring the smoothness of the transition. Why ?

Because I didn’t define in the normal element a letter-spacing: 0px;. That is, it is necessary that the property has an initial value to happen the transition. In Safari happens this.

Now on the case below I can’t get around the situation. When entering the site, two images perform an animation. But to hover of these images, another effect happens.

Hence when you take the mouse off the image, it goes back to its initial properties and not to the properties I set in 100% of keyframes of animation.

In the CSS defined in the element that the image will start with:

opacity: 0;
transform: scale(0);

And in the Keyframe defined that it will end with:

opacity: 1;
transform: scale(1);

Then in Safari the image comes back with opacity:0...

CSS

    .menu-language-full{
        position: absolute;
        right: 0;
        width: 100px;
        height: 50px;
        display: block;
        z-index: 1;
        top: 15px;
        img{
            margin-left: 5px;
            vertical-align: middle;
            opacity: 0;
            transform: scale(0);
            animation-name: ShowImgIdioma;
            animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
            animation-fill-mode: forwards;
            animation-duration: 0.5s;
            transition: all 0.6s ease;
            &.pt-br{
                animation-delay: 2.2s; 
            }
            &.en{
                animation-delay: 2.4s;
            }
            &:hover{
                transform: scale(1.1);
                filter: blur(1px);
            }
        }
    }

Keyframes

@keyframes ShowImgIdioma{
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

Answer 1

This may occur by the browser not recognizing the css properties try as the example below, which is an example where it runs in all browsers.

//OPACITY

-moz-opacity: 0.28;
-khtml-opacity: 0.28;
opacity: 0.28;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=28);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=28);
filter:alpha(opacity=28);

//TRANSITION

-webkit-transition: all 01s ease;
-moz-transition: all 01s ease;
-ms-transition: all 01s ease;
-o-transition: all 01s ease;
transition: all 01s ease;

//TRANSFORM

-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);