Div qui ne popup pas sous safari

**thierryler** · 23/09/2015, 18h32

Bonjour à tous,

Sur mon site, j'ai mis un sablier quand on clique sur le bouton "valider" de mon formulaire. Le temps que la page suivante se charge, ca doit afficher un div sombre avec une animation au centre. Ca fonctionne très bien sur chrome et firefox, comme on peut le voir ici :
http://dev.profil4.com/disc-essentiel.php

Par contre, ça ne s'affiche pas sous Safari. Ca se contente d'aller à la page suivante. Et plus étrange encore, si je clique sur "back", là je reviens donc à mon formulaire et je vois la div sombre avec l'animation...

D'un point de vue code, voici ce que j'ai fais :

Le CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#spinner {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	background: black;
	opacity:0.7;
	visibility: hidden;
}

Dans le head, le code de l'animation :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="js/spin.min.js"></script>

Dans la page, le formulaire et le bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form action="disc-essentiel.php" method="post" id="disc-form" role="form" class="form-horizontal" >
 
<button type="submit" class="btn btn-default" id="disc-form-bouton">Commencer</button>

Et en bas de page, la petite fonction de config :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
$( "#disc-form" ).submit(function( event ) {
	$("#disc-form-bouton").prop("disabled", true);
	showSpinner();
});
</script>

Et ma fonction show :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="spinner"></div>
 
<script>
var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#ffffff', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};
 
var targetSpinner =  document.getElementById('spinner');
if(targetSpinner != null) {
	var spinner = new Spinner(opts).spin(targetSpinner);
}
 
function showSpinner() {
	$("#spinner").css("visibility", "visible");
 
}
</script>

Quelqu'un aurait une idée ?

Je précise que j'ai ce fonctionnement différent aussi bien sur le macbook que sur l'ipad. Je suppose que c'est vraiment une spécificité assumé de Safari du coup...