Hello,

après avoir assidument éplucher les cours HTML/CSS/Javascript sur le site je me suis jeté dans le grand bain et je crée un site très fortement inspiré de ça

J'avance petit à petit, j'ai mis en place l'affichage de la page principale mais j'ai un souci. Sous Safari (9) j'ai de gros problèmes de fluidité au chargement de la page (Les éléments sur lesquels j'effectue une transition, à savoir mon bg:before et ma boxID, ne sont pas du tout fluide, on dirait un film avec 4 ou 5 images/sec au lieu de 24 ). Je comprends pas du tout d'où ça peut venir ???

Sous Chrome et Firefox ça marche nickel, j'ai essayé de vider mes caches, ça ne change rien.

Je bosse sur un MBP, Safari est mon navigateur par défaut, je l'utilise quotidiennement (sans problème particulier) alors que les 2 autres sont pour un usage d'appoint.

J'ajoute les classes .load et .active avec un script jQuery dans mon fichier HTML.

Mon CSS est ici présent :

@font-face
{
	font-family: 'Marvel';
	src: url('Marvel-Regular.ttf');
}

body 
{
	font-family: 'Marvel', Arial, serif;
	font-size: 1em;
	color: #D7D7D7;
}

header
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

nav
{
	margin-top: 4rem;
	box-sizing: border-box;
	text-align: center;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.4 , 0.6 , 0.8 , 1.0);
}

nav.active
{
	opacity: 1;
}

nav ul
{
	display: flex;
	list-style-type: none;
	border: 1px solid #D7D7D7;
	border-radius: 0.4em;
	padding-left: 0;
	margin: 0;
	box-sizing: border-box;
}

nav li
{
	border-left: 1px solid #D7D7D7;
	height: 3rem;
	width: 7.5rem;
	box-sizing: border-box;
}

nav li:first-child
{
	border-left: none;
}

nav li:hover
{
	background-color: rgba(63, 63, 63, 0.5);
}

nav a
{
	text-decoration: none;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #D7D7D7;
	height: 3rem;
	line-height: 3rem;
}

@media screen and (max-width: 480px)
{
	nav ul
	{
		flex-direction: column;
	}

	nav li
	{
		border-left: none;
		border-bottom: 1px solid #D7D7D7;
		height: 5vh;
	}

	nav li:last-child
	{
		border-bottom: none;
	}

	nav a
	{
		height: 5vh;
		line-height: 5vh;
	}
}

footer
{
	text-decoration: none;
	font-size: 0.8em;
	color: #D7D7D7;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.4 , 0.6 , 0.8 , 1.0);
}

footer.active
{
	opacity: 1;
}

#bg
{
	background-image: url("img/background.jpg");
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transform: scale(1.1);
	filter: blur(0px);
	-webkit-transition: scale() 6s ease-in-out, blur 6s ease-in-out;
    -moz-transition: scale() 6s ease-in-out, blur 6s ease-in-out;
    -o-transition: scale() 6s ease-in-out, blur 6s ease-in-out;
    -ms-transition: scale() 6s ease-in-out, blur 6s ease-in-out;
	transition: scale() 6s ease-in-out, blur 6s ease-in-out;
	box-sizing: border-box;
}



#bg.blur
{
	transform: scale(1);
	filter: blur(5px);
}

#bg:before /*constitue le filtre par dessus l'image en background */
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: #000000;
	-webkit-transition: background-color 2s ease-in-out;
    -moz-transition: background-color 2s ease-in-out;
    -o-transition: background-color 2s ease-in-out;
    -ms-transition: background-color 2s ease-in-out;
	transition: background-color 2s ease-in-out;
	transition-delay: 0.8s;
	background-image: linear-gradient(to top, rgba(19, 21, 25, 0.45), rgba(19, 21, 25, 0.45));
}

body.load #bg:before
{
	background-color: unset;
}

#wrapper
{
	position: relative;	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	z-index: 10;
}

#wrapper:before /*crée un élément qui vient s'insérer au dessus du header avec de centrer celui-ci */
{
	content: '';
	display: block;
	box-sizing: border-box;
}

/* Header informations identité */

#boxID
{
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	border-top: 1px solid #D7D7D7;
	border-bottom: 1px solid #D7D7D7;
	width: 50vw;
	height: 0;
	opacity: 0;
	transition: height 0.9s cubic-bezier(0.2 , 0.9 , 0.95 , 1.0), opacity 0.9s cubic-bezier(0.4 , 0.6 , 0.8 , 1.0);
	overflow: hidden;
}

#boxID.active
{
	height: 20vh;
	opacity: 1;
}

#textID
{
	font-size: 1em;
	text-align: center;
	letter-spacing: 0.5em;
	transition: font-size 0.9s cubic-bezier(0.2 , 0.9 , 0.95 , 1.0);
}

#textID > p
{
	font-size: 0.8em;
	letter-spacing: 0.2em;
}

#textID > h1
{
	color: #F5F5F5;
}

@media screen and (max-width: 480px)
{
	#boxID
	{
		width: 90vw;
	}

	#textID
	{
		font-size: 2vh;
	}
}

Salut,

Il a toujours était non recommandé de faire des transitions sur des shadow et des filters pour des raisons de perf.

Sinon pour info, on ne fait pas de transition sur le scale ou le blur mais sur le transform et le filter.

Si tu veux des meilleurs perf pour ce genre d'effets, il va falloir faire du canvas.

-
Edité par Yo123456 6 août 2017 à 15:17:27

Salut Toutoclic,

ce que tu appelles shadow c'est l'opacité ?

Parce que mes transitions je les fais sur le background-color d'un élément d'une part, et la hauteur et l'opacité pour la box d'autre part. Et ça ne merdoit pas que pour l'opacité. L'ouverture de ma boxID et l'affichage de mon background sont exécrables...

Et merci pour ta remarque sur transform et filter, ça m'évitera d'autres déconvenues !

En effet ici tu n'as pas de transition sur du shadow, je parlais de manière générale. En revanche tu en as sur ton filter blur

transition: scale() 6s ease-in-out, blur 6s ease-in-out;

Ok, on peut les trouver où les recommandations ?

Malgré les recommandations la transition sur le blur (ou plutôt le filter ) elle fonctionne nickel, sur tous mes navigateurs.

Mais ça rame toujours sur celle du chargement de la page principale...j'ai essayé d'ajouter un délai via un window.setTimeout dans mon script mais ça ne change rien !

Je comprends pas. 

je t'ai donné la solution (sauf si il y en a une que je ne connais pas...) pour améliorer les performances, tu va devoir passer sur une solution en canvas. une transition su un blur te causera des ralentissements dans tous les cas...

A la limite tu peux faire un test en modifiant le transform:

#bg
{
    transform: scale(1.1)  translateZ(0);
}
 
 
 
#bg.blur
{
    transform: scale(1) translateZ(0);
    filter: blur(5px);
}

Mais je ne pense pas que ça t'aide beaucoup pour ton problème...

Merci pour tes retours Toutoclic.

J'ai mis Safari de côté et me suis concentré sur Firefox et Chrome pour continuer mes dev. Et là après quelques jours je viens de refaire un test sur Safari et tout fonctionne nickel...

Mystères...

Pour la solution en canvas je verrai par la suite, j'ai déjà pas mal de trucs à digérer et je me sens pas de me lancer sur de la nouveauté alors que tout fonctionne. Surtout que d'après le cours la partie sur canvas c'est un bon morceau !!