diff --git a/src/features/accesskit/disable_gifs.js b/src/features/accesskit/disable_gifs.js index f0287498b..907e7a4b4 100644 --- a/src/features/accesskit/disable_gifs.js +++ b/src/features/accesskit/disable_gifs.js @@ -42,7 +42,7 @@ export const styleElement = buildStyle(` .${canvasClass}${hovered}, .${labelClass}${hovered}, -img:has(~ .${canvasClass}):not(${hovered}) { +.${canvasClass} ~ img:not(${hovered}) { display: none; } @@ -78,7 +78,7 @@ const pauseGif = function (gifElement) { canvas.className = gifElement.className; canvas.classList.add(canvasClass); canvas.getContext('2d').drawImage(image, 0, 0); - gifElement.parentNode.append(canvas); + gifElement.before(canvas); addLabel(gifElement); } }; @@ -87,12 +87,11 @@ const pauseGif = function (gifElement) { const processGifs = function (gifElements) { gifElements.forEach(gifElement => { if (gifElement.closest('.block-editor-writing-flow')) return; - const pausedGifElements = [ - ...gifElement.parentNode.querySelectorAll(`.${canvasClass}`), - ...gifElement.parentNode.querySelectorAll(`.${labelClass}`) - ]; - if (pausedGifElements.length) { - gifElement.after(...pausedGifElements); + const existingCanvasElements = gifElement.parentNode.querySelectorAll(`.${canvasClass}`); + const existingLabelElements = gifElement.parentNode.querySelectorAll(`.${labelClass}`); + if (existingCanvasElements.length || existingLabelElements.length) { + gifElement.before(...existingCanvasElements); + gifElement.after(...existingLabelElements); return; }