From 55d7176e51b81d7a375a7a68accba5cfef5bcb6f Mon Sep 17 00:00:00 2001 From: Fabien egg O'Carroll Date: Wed, 8 Dec 2021 17:46:03 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20card=20scripts=20executi?= =?UTF-8?q?ng=20before=20DOM=20is=20parsed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no-issue Using the async attribute means that the script is downloaded in parallel with the parsing of the html into DOM, and then executed upon completion. This means that the script cannot be sure that particular parts of the DOM exist as it may not have finished parsing. This has resulted in bugs with the new toggle card not working. Switching our script to use the defer attribute means that the script is still downloaded in parallel with parsing, but it is not executed until parsing is complete. This means that the script can safely access the DOM. --- core/frontend/helpers/ghost_head.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/frontend/helpers/ghost_head.js b/core/frontend/helpers/ghost_head.js index 9579f1ab56..52d2d56205 100644 --- a/core/frontend/helpers/ghost_head.js +++ b/core/frontend/helpers/ghost_head.js @@ -199,7 +199,7 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase // @TODO do this in a more "frameworky" way if (cardAssetService.hasFile('js')) { - head.push(``); + head.push(``); } if (cardAssetService.hasFile('css')) { head.push(``);