Не работает css слайдер на нативном iPhone

Есть сайт, www.illiabakunovskyi.space/ , при нажатии на картинку должен открываться слайдер, на iphone он открывается, работает поведение стрелок, как будто слайды регистрируются, но сам слайд остается первый, который отобразился. В симуляции агента через chrome на пк, все работает.

HTML

<div class="slider__wrapper" id="slider__click__1">
    <div class="slider__wrapper__2" id="slider__click__2"></div>
    <div class="slider__close" onclick="hideSlider()"></div>
        <article id="slider">
                <input checked type="radio" name="slider" id="switch1">
                <input type="radio" name="slider" id="switch2">
                <input type="radio" name="slider" id="switch3">
                <input type="radio" name="slider" id="switch4">
                <input type="radio" name="slider" id="switch5">
                <input type="radio" name="slider" id="switch6">
                <input type="radio" name="slider" id="switch7">
                <input type="radio" name="slider" id="switch8">
                <input type="radio" name="slider" id="switch9">
                <input type="radio" name="slider" id="switch10">
                <input type="radio" name="slider" id="switch11">
            <div id="slides">
                <div id="overflow">
                    <div class="image">
                        <article><img class="vertical__slider" src="image/1.jpg"></article>
                        <article><img class="horizontal__slider" src="image/2.jpg"></article>
                        <article><img class="vertical__slider" src="image/3.jpg"></article>
                        <article><img class="horizontal__slider" src="image/4.jpg"></article>
                        <article><img class="vertical__slider" src="image/5.jpg"></article>
                        <article><img class="vertical__slider" src="image/6.jpg"></article>
                        <article><img class="vertical__slider" src="image/7.jpg"></article>
                        <article><img class="vertical__slider" src="image/8.jpg"></article>
                        <article><img class="horizontal__slider" src="image/9.jpg"></article>
                        <article><img class="horizontal__slider" src="image/10.jpg"></article>
                        <article><img class="horizontal__slider" src="image/11.jpg"></article>
                    </div>
                </div>
            </div>
            <div id="controls">
                <label for="switch1"></label>
                <label for="switch2"></label>
                <label for="switch3"></label>
                <label for="switch4"></label>
                <label for="switch5"></label>
                <label for="switch6"></label>
                <label for="switch7"></label>
                <label for="switch8"></label>
                <label for="switch9"></label>
                <label for="switch10"></label>
                <label for="switch11"></label>
            </div>
            <div id="active">
                <label for="switch1"></label>
                <label for="switch2"></label>
                <label for="switch3"></label>
                <label for="switch4"></label>
                <label for="switch5"></label>
                <label for="switch6"></label>
                <label for="switch7"></label>
                <label for="switch8"></label>
                <label for="switch9"></label>
                <label for="switch10"></label>
                <label for="switch11"></label>
            </div>
        </article>
</div>

CSS

    #slider {
    position: absolute;
    width: 80vw;
    height: 84vh;
    margin: 8vh 0 0 10vw;
}
#slides {
    width: 84vw;
    padding: 0 auto;
}
#slides article{
    width: 9.090909%;
    height: 84vh;
    float: left;
}
#slides article .vertical__slider {
    height: 84vh;
    margin: 0 19vw;
}
#slides article .horizontal__slider {
    width: 80vw;
    height: auto;
    margin: 0;
}
#slides .image{
    width: 1100%;
    line-height: 0;
}
#overflow{ 
    width: 100%;
    overflow: hidden;
}
article img{ 
    height: 84vh;
}
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4),
#switch6:checked ~ #controls label:nth-child(5),
#switch7:checked ~ #controls label:nth-child(6),
#switch8:checked ~ #controls label:nth-child(7),
#switch9:checked ~ #controls label:nth-child(8),
#switch10:checked ~ #controls label:nth-child(9),
#switch11:checked ~ #controls label:nth-child(10){
    background: url('../image/arrow1.svg') no-repeat;
    background-size: cover;
    float: left;
    margin: 0 0 0 -5vw;
    display: block;
    height: 4.2vw;
    width: 4.2vw;
}
#switch1:checked ~ #controls label:nth-child(2), 
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(6),
#switch6:checked ~ #controls label:nth-child(7),
#switch7:checked ~ #controls label:nth-child(8),
#switch8:checked ~ #controls label:nth-child(9),
#switch9:checked ~ #controls label:nth-child(10),
#switch10:checked ~ #controls label:nth-child(11){
    background: url('../image/arrow1.svg') no-repeat;
    background-size: cover;
    float: right;
    margin: 0 -5vw 0 0;
    display: block;
    height: 4.2vw;
    width: 4.2vw;
    transform: rotate(180deg);
}
label{
    cursor: pointer;
}
.slider__wrapper input{ 
    display: none;
}
#switch1:checked ~ #slides .image{
    margin-left: 0;
    -webkit-margin-left: 0;
}
#switch2:checked ~ #slides .image{
    margin-left: -100%;
    -webkit-margin-left: -100%;
}
#switch3:checked ~ #slides .image{
    margin-left: -200%;
    -webkit-margin-left: -200%;
}
#switch4:checked ~ #slides .image{
    margin-left: -300%;
}
#switch5:checked ~ #slides .image{
    margin-left: -400%;
}
#switch6:checked ~ #slides .image{
    margin-left: -500%;
}
#switch7:checked ~ #slides .image{
    margin-left: -600%;
}
#switch8:checked ~ #slides .image{
    margin-left: -700%;
}
#switch9:checked ~ #slides .image{
    margin-left: -800%;
}
#switch10:checked ~ #slides .image{
    margin-left: -900%;
}
#switch11:checked ~ #slides .image{
    margin-left: -1000%;
}
#controls{
    margin: -40% 0 0 0;
    width: 100%;
    height: 7vw;
}
#active label{
    display: none;
}
#slides .image{
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#controls label {
    opacity: 0.4;
}
#controls label:hover{
    opacity: 1;
}
#controls label{
    transition: opacity 0.2s ease-out;
}

JS, просто для логики поведения

function showSlider(e) {
document.getElementById("slider__click__1").style.display = "block", document.getElementById("slider__click__2").style.display = "block";
var l = "switch" + e;
document.getElementById(l).checked = !0
}
function hideSlider() {
document.getElementById("slider__click__1").style.display = "none", document.getElementById("slider__click__2").style.display = "none"
}
function positionLogoMobile() {
(document.getElementById("mobile__menu__checkbox").checked = !0) ? document.getElementsByClassName("logo").style.marginTop = "120px": document.getElementsByClassName("logo").style.marginTop = "20px"
}