Анимация CSS подтормаживает в safari

Скопировал слайдер, настроил под себя. В хроме и Яндексе работает отлично. В Сафари же тормозит. Ни один ответ из подобных вопросов не помог.

Код:

<style>
    
    #contentContainer {
        width: 350px;
        height: 350px;
        border: 5px black solid;
        overflow: hidden;
    }

    #wrapper {
        width: 1400px;
        transform: translate(0, 0, 0);
        transition: transform 0.5s ease;

    }
    .content {

        float: left;
        width: 350px;
        height: 350px;
        white-space: normal;
        background-repeat: no-repeat;
    }
    #itemOne {
        background-image: url("static/main/img/one.jpg");
    }
    #itemTwo {
        background-image: url("static/main/img/two.jpg");
    }
    #itemThree {
        background-image: url("static/main/img/three.jpeg");
    }
    #itemFour {
        background-image: url('static/main/img/four.jpg');
    }

    #navLinks {
        text-align: center;
        width: 350px;
    }
        #navLinks ul {
            margin: 0px;
            padding: 0px;
            display: inline-block;
            margin-top: 6px;
        }
            #navLinks ul li {
                float: left;
                text-align: center;
                margin: 10px;
                list-style: none;
                cursor: pointer;
                background-color: #CCCCCC;
                padding: 5px;
                border-radius: 50%;
                border: black 5px solid;
            }
                #navLinks ul li:hover {
                    background-color: #FFFF00;
                }
                #navLinks ul li.active {
                    background-color: #333333;
                    color: #FFFFFF;
                    outline-width: 7px;
                }
                    #navLinks ul li.active:hover {
                        background-color: #484848;
                        color: #FFFFFF;
                    }
    
</style>