How to fix animation in safari on iphone?

Question

css

Below is an example of my "shit code", it works everywhere, including in desktop safari, but on the iphone the animation works as it wants, it will work completely, then only one block will change, then the block will hide - then no, in short something like this

$("#show-left-menu").click(function(){
        var block = $("#left-sidebar"),
            button = $(this);
        if(button.attr('title') == 'Раскрыть меню'){
            button.attr('title', 'Скрыть меню');
            button.find('.line-hamburger:nth-child(2)').css('display','none');
            button.find('.line-hamburger:nth-child(1)').css('transform','translate3d(0,10px,0) rotate(45deg)');
            button.find('.line-hamburger:nth-child(3)').css('transform','translate3d(0px, 6px, 0px) rotate(-45deg)');
            block.css("transform",'translate3d(210px, 0px, 0px)');
        }
        else if(button.attr('title') == 'Скрыть меню'){
            button.attr('title', 'Раскрыть меню');
            button.find('.line-hamburger:nth-child(2)').css('display','block');
            button.find('.line-hamburger:nth-child(1)').css('transform','translate3d(0,0,0) rotate(0)');
            button.find('.line-hamburger:nth-child(3)').css('transform','translate3d(0,0,0) rotate(0)');
            block.css("transform",'translate3d(0px, 0px, 0px)');
        }
    });

Answer 1

I rewrote everything more competently, now a class is added, and css is already set in it, I think it’s more reasonable, but the error turned out to be in nth-child, apparently mobile safari doesn’t like it very much, I made nth-of-type and everything worked in a bunch, helped here this topic in stack-overflow - stackoverflow.com/questions/17312140/nth-child-doe...