11548 sujets

JavaScript, DOM et API Web HTML5

Safari planté par un menu déroulant

Bonjour à tous,

Voilà un sujet que j'ai posté dans le forum HTML, XHTML, sémantique web, celui-ci étant resté sans réponse, je l'ouvre ici...

Voici le site en question : http://www.atelierdesimages.com/

A droite, la rubrique "clients" a un menu déroulant dont voici le code :

<ul id="clients">
	<li><span id="in">actualité</span></li>
	<li class="right"><a href="#" title="Clients">clients</a>
		<ul>
			<li><a href="/pages/clientcom-5.html">Le&nbsp;Grand&nbsp;T</a></li>
			<li><a href="/pages/clientcom-6.html">Nantes&nbsp;Métropole</a></li>
			<li><a href="/pages/clientcom-7.html">Ville&nbsp;de&nbsp;Saint-Herblain</a></li>
			<li><a href="/pages/clientcom-8.html">CCI&nbsp;Nantes&nbsp;Saint-Nazaire</a></li>
			<li><a href="/pages/clientcom-9.html">Jean-Marc&nbsp;Ayrault</a></li>
		</ul>

	</li>
</ul>

C'est un menu déroulant en CSS, avec un code javascript pour la prise en compte de IE6 :

<!--[if lt IE 7]>
	<script type="text/javascript">
	// Fonction destinée à remplacer le "LI:hover" pour IE 6
		
		sfHover = function() {
			var sfEls = document.getElementsByTagName("li");
			for (var i=0; i<sfEls.length; i++) {
			sfEls[ i ].onmouseover = function() {
				this.className = this.className.replace(new RegExp(" sfhover"), "");
				this.className += " sfhover";
				}
				sfEls[ i ].onmouseout = function() {
				this.className = this.className.replace(new RegExp(" sfhover"), "");
				}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
		</script>
	<![endif]-->


Les liens sont générés dynamiquement depuis une base de données et j'utilise une réécriture des URLs.

Tout va très bien sur Firefox (Mac et PC) et sur IE6/7, par contre il y a un plantage sur Safari Mac lorsque l'internaute clique sur un lien du menu déroulant... upload/14854-Image-1.jpg
Je n'ai aucune idée de ce qui peut provoquer ce plantage... Avez-vous déjà rencontré ce problème ?

Merci de votre aide à tous !!
Modifié par Florent V. (27 Dec 2008 - 21:46)
J'ai supprimé l'ancien sujet afin de ne pas avoir de doublons. Il appartient aux modérateurs de déplacer les sujets lorsqu'ils ne sont pas dans le salon le plus approprié.
Ensuite, un peu de méthodologie:

1. Corriger toutes les erreurs HTML de la page.
2. Corriger toutes les erreurs CSS (ou les isoler, c'est à dire recenser chaque erreur et, si elle ne peut pas être corrigée, en déterminer les conséquences).
3. Vérifier si le problème se produit toujours.
4. Désactiver (commenter dans le code HTML ou supprimer) tous les scripts JS. Vérifier si le problème se produit même sans JS.
5. Quelle version de Safari est concernée? Numéro de version, build, etc.
6. Vérifier si le problème se produit avec une version plus récente, avec la même version sur une autre machine, etc.
7. Vérifier si la console d'erreur du navigateur affiche quelque chose lors du chargement de la page, ou ensuite lors du survol et de l'affichage du sous-menu par exemple. La console d'erreurs pour Safari est accessible, dans les versions récentes (3.0 à 3.2) dans les outils pour développeur, qu'il faut peut-être rendre visible dans les options de Safari.

Voilà pour les quelques mesures et vérifications de routine. Smiley smile
Merci de ton attention, je n'ai pas vraiment le temps actuellement pour corriger toutes les erreurs... J'ai jeté un oeil sur l'insertion des lecteurs vidéo en Flash... J'avais utilisé les balises embed... J'ai corrigé ce point là.

Concernant le bug, il a été testé sur safari version 3.1.2. Et récemment, sur une autre version (j'attends de savoir laquelle) et le bug était intermittent... Parfois cela fonctionne, parfois cela plante soit au survol soit en cliquant. Je n'y comprends rien !
Modifié par Isobel (12 Jan 2009 - 12:14)
Et hop déterrage de post :

Le problème se pose avec l'utilisation d'un style CSS s'appliquant à un élément voisin.

En ce qui me concerne, voici la déclaration qui pose problème : 
#header ul li a:hover + ul {
	display:block;  
}


C'est net et sans appel : survoler le lien = plantage.
Constaté sur safari win 4.0 et Mac 4.0.3

(Xhtml et CSS validé, même résultat sans javascript)
Pseudo solution :
- on conserve la déclaration qui pose pb
- et on ajoute une déclaration qui utilise le javascript (la même que pour IE6 en ce qui me concerne) 

#header ul li a:hover + ul {    /* ATTENTION, fait planter safari  */
	display:block;  
}
#header ul li.over ul {  /*  alors on utilise le js  */
	display:block;
	z-index:1000;
}


Bien entendu, javascript désactiver = même problème... quelqu'un a une meilleur idée ?

- - - -
Edit : Retour en section CSS et mise en page ^^
Modifié par Hermes (21 Aug 2009 - 14:41)
Bonjour,

J'ai essayé de reproduire le problème à partir de ton descriptif, mais je n'arrive à rien sur Safari 4 (Mac) et Safari 3 (Mac). Sur Safari 3, le sélecteur de type element:hover + element est ignoré, mais ne fait pas planter le navigateur.

La page de test est la suivante:
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Bug Safari?</title>
	<style>
	ul {
		display: none;
	}
	a:hover + ul, a:focus + ul {
		display: block;
	}
	#test2 {
		display: block;
	}
	</style>
</head>
<body>

<a href="#">Test</a>
<ul>
	<li>Test</li>
</ul>

<hr>

<ul id="test2">
	<li>Lol</li>
	<li>Kikoo</li>
	<li>
		<a href="#">ROTFL</a>
		<ul>
			<li>ORLY?</li>
			<li>YES, RLY.</li>
		</ul>
	</li>
</ul>

</body>
</html>
Sujet clos
Aller à