web-dev-qa-db-fra.com

=Chrome BOGUE: fenêtre sans tête non rendue (nouvel onglet en arrière-plan) si l'ouène est référencé

[voir mises à jour en bas]

Lorsque je clique sur A sur mon site Web, il s'ouvre correctement dans Google Chrome .

Quand j'ai clic de commande le lien, ouvrant un nouvel onglet en arrière-plan, la page semble Pour charger (correct Favicon, barre de chargement, etc.) mais c'est juste une page vierge dans le nouvel onglet.

C'est comme si le navigateur est en attente de quelque chose avant de dessiner la page et que quelque chose ne vient jamais.

Je suis sur MacOS 11.1 , en utilisant Google Chrome 87.0.4280.88 .

J'essaie de résoudre ce problème apparemment trivial car plusieurs personnes se sont plaintes que Facebook se connecte à notre site ouverte comme une page vierge.

[Mise à jour 1]

Le coupable semble être un bug in Chrome causé par la fenêtre de référencement .Terwidth dans un fenêtre non comprise .

Code minimal pour reproduire le problème:

<html><head><script>
   document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
</script></head><body><p>
   Hello World
</p></body></html>

Lien vers la page: fichiers.svija.love/chrome =.

  • cliquer sur la commande sur le lien ci-dessus dans Chrome résultats dans une page vierge
  • changer de fontsize sur d'autres éléments est toujours brisé
  • remplacement du document.documentation.style.fontsize avec une variable résout le problème (mais ne m'aide pas, car j'en ai besoin)

[Mettre à jour 2]

Trebor La réponse m'a aidé à proposer un test différent qui a clarifié le problème.

Le code suivant peut être visité à fichiers.svija.love/chrome/test.html :

<html><head><script>

  t = 0;

  function updateTitle(){
     t += 10;
     document.title=t + ': ' + window.outerWidth;
     }

   x = window.setInterval(updateTitle, 10);

</script></head><body></body></html>

Le script définit le titre de la page sur la fenêtre égale .Terwidth.

Vous pouvez cliquer sur le lien, puis regarder la valeur de la modification de l'onduleur extérieure dans le titre de l'onglet adjacent.

Il est réglé sur zéro jusqu'à ce que la fenêtre soit concentrée.

Fait intéressant, la fonction seinterval fonctionne à environ 1/10ème vitesse jusqu'à ce que la fenêtre soit concentrée, également.

javascriptgoogle-chromebugsdocument-rootdom
4
Andrew Swift

Le problème semble être que le window.outerwidth La valeur n'est pas définie qu'après la fin de la nouvelle fenêtre. En outre, il apparaît que votre script est exécuté avant que l'objet de la nouvelle fenêtre soit complètement "initialisé", au moins en chrome.

Essayez ce test:

<html><head><script>
   document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
    alert('The value of window.outerWidth/50 is: ' + (window.outerWidth) + 'px');
    setTimeout(checkSizeAgain,5000);

    function checkSizeAgain() {
           alert('The value of window.outerwidth after delay is: ' + (window.outerWidth) + 'px');
           document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
        }


</script></head><body><p>
   Hello World
</p></body></html>

Lorsque vous cliquez sur Normalement et que la page en cours est redirigée, la valeur affichée est correcte car l'objet de la fenêtre a déjà été dessiné par l'URL précédente (vous n'avez pas laissé l'onglet contenant un objet de fenêtre entièrement initialisé).

Cependant, lorsque vous CTRL + Cliquez sur la valeur, il est affiché de zéro car vous lancez un nouvel onglet et que l'objet Window n'ayant pas encore de propriété de WindIidth. Cependant, après seulement 5 secondes, la taille est correcte.

Il semble étrange que =Chrome vous permettrait d'exécuter votre script avant l'objet de la fenêtre étant complètement initialisé, mais cela semble être le cas.

Comme vous l'avez dit, le problème ne semble que se produire dans Chrome.

2
Trebor