Bug IE7 IE8 position fixed et onclick

**marcha** · 11/01/2010, 17h08

Bonjour,

Je suis tombé sur un bug surprenant concernant la gestion des évènements
sur Internet Explorer 7 et 8

Et j'aimerai bien savoir si quelqu'un a une explication rationnelle :-)

Je pose un overlay qui occupe toute la page en position fixed
top: 0; left: 0; bottom: 0; right: 0;

Je gère le onclick dessus et aussi sur certains éléments de ma page.

Sur tous les navigateurs excepté IE le overlay en position fixed gère
le click et les autres éléments ne le voie pas.

Sur IE, c'est le onclick de la div #dessous qui est traité, mais uniquement
quand on click sur le texte (alors qu'on pourrait s'attendre à une gestion du
click sur toute la div)

Partout ailleur sur la page, c'est bien le onclick de l'overlay qui est traité.

Ce n'est pas une question de remontée des évènement (bubbling) puisque
l'overlay n'est pas enfant du div #dessous (ça change rien au problème de
tenter de faire un preventDefault ou stopPropagation ou return false sur le
gestionnaire d'évènement)

Voici un code pour tester. Vous pouvez contourner le bug en appliquant
une couleur de fond et une transparence (marche aussi avec une image
de fond transparente). Pour cela décommentez dans le css.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
#dessous { background-color: #ff0; }
#overlay { 
  position: fixed; top: 0; left: 0; bottom: 0; right: 0;
  /* background: #000; opacity: 0; filter: alpha(opacity = 0); */
}
</style>
</head>
<body>
<div id='dessous' onclick='alert("dessous")'>Dessous</div>
<div id='overlay' onclick='alert("overlay")'></div>
</body> 
</html>

**kernelfailure** · 11/01/2010, 17h12

Bonjour,

As-tu essayé de jouer avec les z-index ?

**marcha** · 11/01/2010, 17h18

Le problème n'est pas de trouver un contournement, c'est déjà fait.

Ce que j'aimerai c'est une explication :-)

**kimjoa** · 11/01/2010, 22h45

je pense qu'il n'y a tout simplement pas d'explication, car justement il s'agit d'un bug

toute explication serait hasardeuse...

mais en tout cas, merci !! je savais pas qu'on pouvais faire comme ca pour geler l'interface utilisateur

**E.Bzz** · 12/01/2010, 10h44

Bonjour,

Envoyé par marcha

Le problème n'est pas de trouver un contournement, c'est déjà fait.

C'est plus une (tentative d') explication qu'un contournement : si tu ne précises pas le z-index, c'est le nav qui décide de l'ordre d'empilement des 2 éléments.

Et pour peu qu'IE décide de faire différemment des autres ...

A+

Bug IE7 IE8 position fixed et onclick

JavaScript

Discussions similaires

Partager

Partager