Comment forcer Firefox à redessiner un élément vidéo?

Question

Je développe une fenêtre pop-up html dynamique (div positionné en absolu) en utilisant jQuery qui se centre automatiquement sur l'écran. Il peut également accueillir un contenu qui correspond ou dépasse les dimensions de l'écran de la fenêtre. L'idée est que notre client clique sur un lien "lire plus" à côté de notre liste de produits, puis cette fenêtre pop-up apparaît et affiche sa lettre de vente. Chaque lettre de vente contient également une vidéo qui décrit plus en détail le produit.

La fenêtre contextuelle restera au centre de l'écran jusqu'à ce qu'elle soit fermée en cliquant sur le bouton de fermeture de la fenêtre ou en cliquant à l'extérieur. Il reste au centre en ajustant son positionnement absolu en fonction de l'endroit où l'utilisateur fait défiler et s'il redimensionne la fenêtre.

Mon problème est dans l'élément vidéo. Dans tous les autres navigateurs, sauf Firefox (de toutes les choses), la vidéo est rendue parfaitement dans la fenêtre pop-up que l'utilisateur fait défiler le document ou redimensionne la vidéo. Cependant, dans Firefox, lorsque l'utilisateur fait défiler/redimensionner et que la fenêtre contextuelle ajuste son positionnement absolu, la vidéo semble s'obscurcir d'où elle était à l'origine où elle est maintenant ou l'écran vidéo devient transparent.

Je pensais que peut-être que ce qui devait être fait est de forcer Firefox à redessiner l'écran vidéo. J'ai essayé plusieurs façons d'accomplir cela. Simplement faire disparaître l'élément et réapparaître rapidement ne semblait pas faire l'affaire. Cependant, si j'ai rapidement ajusté ses marges ou sa position d'avant en arrière, cela a semblé fonctionner. Dans un premier temps, j'allais utiliser cette solution. Mais alors que je commençais à le tester sur d'autres navigateurs, ce mouvement de «ralentissement» a semblé ralentir le navigateur, surtout je l'ai remarqué dans Chrome (je ne l'ai pas encore testé sur les autres navigateurs).

J'ai pensé à limiter cette correction à Firefox, mais le champ de données du navigateur dans jQuery a été déprécié en 1.3. Je pourrais toujours faire moi-même le javascript pour identifier le navigateur, mais je me demandais s'il y avait une meilleure façon de forcer le navigateur à redessiner l'élément vidéo. Ou peut-être que je suis sur la mauvaise voie et il n'a pas besoin d'être redessiné.

J'utilise FireFox 3.0.1, Chrome 1.0.154.48, Internet Explorer 7 et Safari 3.

Toute entrée serait appréciée :) Voici le code de la fonction wiggleVids:

** Mise à jour: J'ai changé le code de façon à ce que les éléments incorporés ne bougent que lorsque la position de la boîte popup a changé, au lieu de la lier à la fonction de défilement de la fenêtre. Cela a accéléré un peu l'exécution de chrome, mais ce n'est pas encore tout à fait le cas. C'est toujours un retard notable.

** Mise à jour 2: Suite à la suggestion de Lee, j'ai changé le code afin que les vidéos incorporées dans la fenêtre contextuelle soient stockées dans un tableau. De cette façon, lorsque cette fonction sera exécutée, le navigateur n'aura pas à rechercher le DOM encore et encore pour les objets incorporés. myVids est globalement déclaré et effacé lorsque la popup se ferme.

function wiggleVids3() { 
    if (myVids.length <= 0) { 
     $('#popup embed').each(function(ctr) { myVids[ctr] = $(this); }); 
    } 

    if (myVids.length > 0) { 
     for(var ctr = 0; ctr < myVids.length; ctr++) { 
      var myObj = myVids[ctr]; 
      var temp = myObj.css("margin-top"); 
      var suffix = temp.substr(temp.length - 2,temp.length); 
      var currentMargin = ((suffix == 'px') || (suffix == 'em')) ? parseInt(temp.substr(0, temp.length - 2)) : parseInt(temp); 
      var newMargin = currentMargin + 2; 
      myObj.css('margin-top', newMargin + 'px'); 
      setTimeout(function(){ myObj.css('margin-top', currentMargin); }, 1); 
     } 
    } 
} 

Answer 1

Même si jquery ne le supporte pas, je pense que vous êtes mieux en utilisant le code différent pour chaque navigateur, ou seulement « permettant » le code spécial firefox lorsqu'un navigateur Firefox est détecté. On dirait que cela résoudrait votre problème avec peu de travail.

-Adam

Answer 2

bâtiment sur ce que dit @Adam,

Utilisez le Strategy Pattern combiné avec un Factory Pattern pour créer les objets avec une interface similaire pour générer le code HTML, vous pouvez créer un pour chaque navigateur cela agit différemment. Oh, et l'usine fait toute la détection du navigateur ... et configure votre objet.

Cette question est pertinente à ma réponse:

• how-does-the-strategy-pattern-work