Problème affichage slider sur Safari

Bonjour,

J'ai actuellement un problème d'affichage sur Safari avec un carrousel d'images. Les images restent les unes sous les autres au lieu d'être à côté les unes des autres. Et mon border-radius est pris en compte sur l'image du logo mais pas sur le carrousel, alors que sur les autres navigateurs il est correctement pris sur le logo ET sur le carrousel. Dernier problème, sur les autres navigateurs mes slides sont parfaitement fluides, alors que sur Safari ils sont saccadés.

Voici mon HTML :

<div id="slider">
	<figure>
		<img class="background" src="img/background.jpg" alt="Moto dans un champs de lavande" />
		<img class="background" src="img/verdon.jpg" alt="Les gorges du Verdon" />
	</figure>
</div>

Et mon CSS :

/* container */
#slider {
	border-radius: 100em;
	overflow: hidden;
	margin: 0.5em;
	padding: 0;
}

/* slider */
#slider figure {
	width: 200%;
	position: relative;
	text-align: left;
	font-size: 0;
	margin: 0;
	padding: 0;
	/* animation */
	animation: 
		/* name */ slidy
		/* duration */ 20s 
		/* finale position */ infinite;
	/* Mozilla */
	-moz-animation: 
		/* name */ slidy
		/* duration */ 20s 
		/* finale position */ infinite;
	/* Safari, Chrome and Opera */
	-webkit-animation: 
		/* name */ slidy
		/* duration */ 20s 
		/* finale position */ infinite;
}

/* pictures */
.background {
	width: 50%;
}

J'ai suivi un tuto qui explique que pour contourner le bug de Safari il faut mettre les images en float: left. Sauf que si je fais ça, certes ça fonctionne sur Safari, mais sur tous les autres navigateurs j'ai de gros freezes qui apparaissent sur les images pendant les slides.

Pour vous faire une idée voici mon site : www.motalpes.fr

Merci d'avance.
Modifié par YameFAZE (23 Aug 2019 - 15:20)