28172 sujets

CSS et mise en forme, CSS3

Problème de transition avec un slider sur Safari

Bonjour,
J'ai un slider qui fonctionne impeccablement sur Chrome/Firefox mais sur Safari, il y a un blanc (body) entre deux images qui peut durer 0.4 secondes (et pour le coup "remplacer" une image du slider !) !
On parle de ce problème (je crois) sur qq forums mais ils sont en anglais Smiley hum
Je vous laisse les CSS, d'avance MERCI Smiley cligne 
#bgfade1, #bgfade2, #bgfade3 {
	animation: bg-fade-in-out 12s ease infinite 0s;
	opacity: 0;
	position: fixed;
}
/* définition délai des images */
#bgfade1 { animation-delay: 0s; }
#bgfade2 { animation-delay: 4s; }
#bgfade3 { animation-delay: 8s; }
/* définition des étapes */
@keyframes bg-fade-in-out {
	0%, 100% {
	  opacity: 0;
	}
	8.33% {
	  opacity: 1;
	}
	33.33% {
	  opacity: 1;
	}
	41.67% {
	  opacity: 0;
	}
}
/* -------------------------------------- */
/* HEADER - TITRES -> SLIDE */
#bgfadewrap > div > div {
	position: absolute;
	overflow: hidden;
	width: 100%;
	bottom: 10px;

}

Bonne soirée,
ED
Bonjour kerlutinoec,
Voici le html :
			<div id="bgfade1">
				<div>
					<h1>Texte1</h1>
				</div>
			</div>
			<div id="bgfade2">
				<div>
				<h1>Texte2</h1>
				</div>
			</div>
			<div id="bgfade3">
				<div>
					<h1>Texte3</h1>
				</div>
			</div>
		</div>

et TOUS les CSS (y'a du monde Smiley sweatdrop 
/* HEADER - background fade */
#bgfadewrap {
	position: relative;
	overflow: hidden;
	height: 100vh; /* 100% hauteur fenetre */
}
#bgfadewrap > div {
	position: absolute;
	overflow: hidden;
	top: 0; left: 0;
	bottom: 0; right: 0;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 575px) {
#bgfade1 { background-image: url('../imgs/640w/Lou_GP.jpg'); }
#bgfade2 { background-image: url('../imgs/640w/Lou_GP_3.jpg'); }
#bgfade3 { background-image: url('../imgs/640w/Lou_GB_4.jpg'); }
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
#bgfade1 { background-image: url('../imgs/960w/Lou_GP.jpg'); }
#bgfade2 { background-image: url('../imgs/960w/Lou_GP_3.jpg'); }
#bgfade3 { background-image: url('../imgs/960w/Lou_GB_4.jpg'); }
}
@media only screen and (min-width: 769px) and (max-width: 1920px) {
#bgfade1 { background-image: url('../imgs/1920w/Lou_GP.jpg'); }
#bgfade2 { background-image: url('../imgs/1920w/Lou_GP_3.jpg'); }
#bgfade3 { background-image: url('../imgs/1920w/Lou_GB_4.jpg'); }
}
@media only screen and (min-width: 1921px) {
#bgfade1 { background-image: url('../imgs/Lou_GP.jpg'); }
#bgfade2 { background-image: url('../imgs/Lou_GP_3.jpg'); }
#bgfade3 { background-image: url('../imgs/Lou_GB_4.jpg'); }
}
/* ------------ */
/* Diaporama avec effet fade in/out */
/* voir :  https://nosmoking.developpez.com/demos/css/diapo_fade_calcul.html  */
/* ------------ */
/* définition de l'animation sur les images : delai 4 secondes */
#bgfade1, #bgfade2, #bgfade3 {
	animation: bg-fade-in-out 12s ease infinite 0s;
	opacity: 0;
	position: fixed;
}
/* définition délai des images */
#bgfade1 { animation-delay: 0s; }
#bgfade2 { animation-delay: 4s; }
#bgfade3 { animation-delay: 8s; }
/* définition des étapes */
@keyframes bg-fade-in-out {
	0%, 100% {
	  opacity: 0;
	}
	8.33% {
	  opacity: 1;
	}
	33.33% {
	  opacity: 1;
	}
	41.67% {
	  opacity: 0;
	}
}
/* -------------------------------------- */
/* HEADER - TITRES -> SLIDE */
#bgfadewrap > div > div {
	position: absolute;
	overflow: hidden;
	width: 100%;
	bottom: 10px;

}
@media only screen and (max-width: 575px) {
	#bgfadewrap > div > div {
	bottom: 45px;
}
}
@media only screen and (min-device-width : 576px) and (max-device-width : 1024px) {
#bgfadewrap > div > div {
	bottom: 40px;
}#bgfadewrap > div > div h1 {
	margin-bottom:0;
}
#bgfadewrap > div > div h1 {
	font: 15vw/11vw 'Chunkfive', 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
}
#bgfadewrap > div > div h1 {
	position: relative;
	padding:0.7rem;
	margin-bottom:30px;
	color: #FFF;
	opacity: 0.7;
	text-decoration: none;
	text-shadow: 1px 1px #000;
	font: 8vw/6vw 'Chunkfive', 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
@media screen and (max-width: 575px) {
#bgfadewrap > div > div h1 {
	font: 15vw/11vw 'Chunkfive', 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
}
@media only screen
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	#bgfadewrap > div > div h1 {
	font: 15vw/11vw 'Chunkfive', 'Alfa Slab One', cursive, Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	margin-bottom:40px;
}
}
/* ------------ */
/* TRANSLATION DES TITRES */
#bgfadewrap > div:nth-child(2n+1) > div h1 {
	text-align:right !important; 
	animation: h1-translate-from-right 12s ease infinite 0s;
	right: -100%;
}
#bgfadewrap > div:nth-child(2n) > div h1 {
	text-align:left !important; 
	animation: h1-translate-from-left 12s ease infinite 0s;
	left: -100%;
}
#bgfadewrap > div#bgfade1 > div h1 { animation-delay: 0s; }
#bgfadewrap > div#bgfade2 > div h1 { animation-delay: 4s; }
#bgfadewrap > div#bgfade3 > div h1 { animation-delay: 8s; }
/* ------------ */
/* définition des étapes */
@keyframes h1-translate-from-right {
	0%, 100% {
	  right: -100%;
	}
	8.33% {
	  right: 0;
	}
	33.33% {
	  right: 0;
	}
	41.67% {
	  right: -100%;
	}
}
@keyframes h1-translate-from-left {
	0%, 100% {
	  left: -100%;
	}
	8.33% {
	  left: 0;
	}
	33.33% {
	  left: 0;
	}
	41.67% {
	  left: -100%;
	}
}

Vois-tu quelque chose ?
Merci et bonne journée,
ED
Modérateur
el_debutanti a écrit :
ça t'aidera si je mis le slider/diaporama en ligne ?

Oui à 800% Smiley smile

D'ailleurs si tu peux aussi nous dire sur quel OS tu es et avec quelle version de Safari ca nous guidera aussi Smiley smile merci
Modifié par _laurent (30 Mar 2022 - 14:57)
Sujet clos
Aller à