Слайдер изображений не отображается ⇐ CSS

[Anonymous]

У меня есть слайдер изображений, который работает по желанию во всех браузерах, кроме Safari и Mozilla Firefox. Ползунок изображения не будет отображаться в этих двух браузерах.
Если я удалю строку переполнения: скрыто; в CSS, слайдер изображения появится в Safari и Mozilla Firefox. . Однако когда этот код удаляется, он отображается неправильно.
Я также пробовал переключить высоту .slider с % на vh. Затем он отображается в Safari и Mozilla Firefox, но кнопки (круглые точки) в нижней части слайдера изображения отображаются неправильно, и между слайдером и изображениями под ним остается пространство.
Будем очень признательны за любые советы.

Код: Выделить всё

var count = 1;
setInterval(function() {

document.getElementById('radio-button' + count).checked = true;

count++;
if (count >  5) {
count = 1;
}

}, 5000);

Код: Выделить всё

.slider {
width: 85%;
height: 100%;
border-radius: 10px;
text-align: center;
overflow: hidden;
position: relative;
left: 50%;
transform: translateX(-50%);
}

.slides {
width: 500%;
display: flex;
}

.slides input {
display: none;
}

.slide {
width: 20%;
transition: 2s;
}

.slide img {
width: 100%;
}

.slide-manual {
position: relative;
width: 100%;
margin-top: -60px;
display: flex;
align-items: center;
justify-content: center;
}

.manual-button {
border: 2px solid #FFFFFF;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
margin: 15px;
}

.manual-button:hover {
background: #FFFFFF;
}

#radio-button1:checked~.one {
margin-left: 0;
}

#radio-button2:checked~.one {
margin-left: -20%;
}

#radio-button3:checked~.one {
margin-left: -40%;
}

#radio-button4:checked~.one {
margin-left: -60%;
}

#radio-button5:checked~.one {
margin-left: -80%;
}

.slide-automatic {
position: absolute;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-left: 0%;
margin-right: 0%;
bottom: 0;
}

.slide-automatic div {
border: 2px solid #FFFFFF;
padding: 5px;
border-radius: 10px;
transition: 1S;
margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1,
#radio-button2:checked~.slide-automatic .auto-button2,
#radio-button3:checked~.slide-automatic .auto-button3,
#radio-button4:checked~.slide-automatic .auto-button4,
#radio-button5:checked~.slide-automatic .auto-button5 {
background:  #FFFFFF;
}

Код: Выделить всё

[url=Blogs/Travel/JapanTravel_English.html]
[img]Blogs/Home_Page/Slideshow/Japan_Travel/Travel_Home_Page_English.jpg[/img]
[/url]

[url=Blogs/Travel/Kansai/Kyoto/Heian_Shrine_Shinen/Heian_Shrine_Shinen_English.html]
[img]https://picsum.photos/800/600[/img]
[/url]

[url=Blogs/Travel/Kanto/Tokyo/Koizumu_Yakumo_Kinen_Koen/Koizumi_Yakumo_Kinen_Koen_English.html]
[img]https://picsum.photos/800/600[/img]
[/url]

[url=Blogs/Culture/Pop_Culture/Blog/Japanese_Comics_Cartoons/Japanese_Comics_Cartoons_English.html]
[img]https://picsum.photos/800/600[/img]
[/url]

[url=Blogs/Travel/Kanto/Kanagawa/Hakone/Hakone_Shrine/Hakone_Shrine_English.html]
[img]https://picsum.photos/800/600[/img]
[/url]

Подробнее здесь: https://stackoverflow.com/questions/792 ... displaying