2009-05-21 18 views
0

Le curseur d'une entrée scintille avec IE7 lorsque la page contient un gif animé.Les gifs animés provoquant le scintillement d'entrée dans IE

Retirez le gif, et le problème disparaît. Edit (encore): Ce dont j'ai vraiment besoin, c'est quelqu'un qui connaît la réponse à un bug bizarre.

Je suis un développeur d'applications web expérimenté depuis 10 ans. Croyez-moi, je sais comment déboguer - par exemple, sachant que le gif animé est la raison du tirage à l'écran est le résultat d'un débogage réussi. Fixer c'est autre chose. Modifiez (encore une fois), en utilisant mon gif, et le code de la réponse trois ci-dessous.

<html> 
    <head> 
     <style type="text/css"> 
      #img { 
       position: absolute; 
      } 
      #dv { 
       background-color: transparent; 
       border: 1px solid Black; 
       height: 450px; 
       position: absolute; 
       width: 600px; 
      } 
      #frm { 
       left: 170px; 
       position: absolute; 
       top: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="http://www.johnherr.net/skeleton.gif" id="img"> 
     <div id="dv"> 
     </div> 
     <form id="frm"> 
      <input type="text"> 
     </form> 
    </body> 
</html> 
+0

Donnez du HTML s'il vous plaît, pourriez-vous s'il vous plaît indiquer la taille du gif (dimensions et taille du fichier) –

+0

La première étape dans le débogage d'un problème comme celui-ci est de supprimer tous les déchets qui l'entourent. Si au cours de ce processus, il commence à fonctionner, vous avez terminé. Sinon, vous avez rendu le problème aussi simple que possible, ce qui est votre meilleur choix pour le débogage, même si vous ne demandez pas d'aide extérieure. – Brian

Répondre

0

Peut-être que c'est votre processeur qui ne peut pas supporter la charge? Cela pourrait notamment être causé sur une machine plus ancienne sur un site Web exécutant javascript intensive.

+0

Non, pas ça. La machine est très bien. Je travaille dans une société de jeux, donc la seule chose qu'ils ne coûtent pas cher est le CPU, la RAM et les cartes vidéo :) –

+0

S'il vous plaît fournir un peu de HTML afin que nous ayons au moins l'idée de la façon dont vous le placez. –

0

Qu'il suffise de dire que nous avons un d'animation gif position absolue. il est ~ 600 x 400. il se trouve sous un autre abs. positionné div qui fournit une couche de transparence. Enfin le formulaire lui-même est abs. positionné par-dessus.

<style type="text/css"> 
#img { 
    position: absolute; 
} 
#dv { 
    background-color: transparent; 
    border: 1px solid Black; 
    height: 450px; 
    position: absolute; 
    width: 600px; 
} 
#frm { 
    left: 170px; 
    position: absolute; 
    top: 100px; 
} 
</style> 
<img src="http://vulcan.wr.usgs.gov/Imgs/Video/MSH/MSH06/MSH06_MOVIE_before_after_from_brutus_10-21_and_10-22-06_animated.gif" id="img"> 
<div id="dv"> 
</div> 
<form id="frm"> 
<input type="text"> 
</form> 

J'ai essayé de reproduire ce que vous avez décrit aussi près que possible. Je ai chargé le ci-dessus dans IE 6, 7 et 8 et n'a pas pu voir des problèmes de curseur vacillante.

Étant donné que je peux venir avec une mise en œuvre qui ne présente pas le problème, il ne semble pas être un général -Gif-causes d'entrée-curseur vacillante d'animation bug dans IE 7 et quelque chose dans votre spécifique balisage et CSS expose le problème dans ce navigateur.

Retirez le gif, et le problème disparaît.

sachant que l'animation gif est la raison du dessin à l'écran est le résultat d'un débogage réussi.

Il est certain que l'ajout du gif animé est la dernière pièce du puzzle menant à ce que vous voyez. Mais comme je l'ai démontré, vous pouvez avoir une forme absolument positionnée sur un gif animé positionné de façon absolue avec un div transparent entre eux et le curseur ne scintille pas.

Je pense que vous allez devoir supprimer ce que vous faites une couche à la fois jusqu'à ce que vous puissiez déterminer précisément ce qui est dans votre balisage ou CSS qui expose le problème.

Il existe une autre possibilité, le scintillement que vous voyez peut être un artefact de votre carte vidéo et/ou pilote vidéo. Vous pouvez essayer d'afficher la page sous IE 7 sur une machine avec un matériel complètement différent pour exclure cette possibilité.

+0

J'apprécie la tentative, mais vous avez tort. Le gif animé que vous avez utilisé dans votre exemple avait un framerate bas. Pour être clair: je n'ai pas eu de scintillement avec votre exemple. J'ai modifié votre code, utilisé mon image, et le scintillement est là. J'ai modifié mon post original pour refléter cela. J'apprécie la tentative, mais mon problème persiste, et l'analyse originale est toujours la meilleure. –

0

J'ai eu le même problème. Supprimez le gif animé et les arrêts de scintillement.

En regardant le CSS, j'ai remarqué que l'image était en cours de redimensionnement pour l'affichage.

J'ai créé une copie de l'image en utilisant un éditeur en ligne à la taille dont j'avais besoin.

La commutation du gif animé vers une version ne nécessitant pas de redimensionnement a résolu le problème.

+1

Comment savez-vous que l'image dans la question est redimensionnée? –