User talk:Polymeric — dev

Image use in Accordion tables

Hi there. I've been playing around with your Accordion module and it seems like images stop displaying after 3-4 are displayed. The space the image takes is there but it won't get displayed. Clicking on it will open up Fandom's image viewer and it works there. I've tried bypassing cache refreshes and purging the pages but I can't get the images to all display properly.

Additionally nesting Accordions 3 levels deep will cause the third Accordion to stop displaying content as well. The header remains but clicking on it won't uncollapse the header's content. Is that a limitation? Horus-ra (talk) 10:17, 1 October 2023 (UTC)

Ripple.js — MutationObserver error ("elem.querySelectorAll is not a function")

Hi! 👋 I’ve found a small issue in MediaWiki:Ripple.js.

In the current version, the **MutationObserver** block near the end of the script can sometimes throw the following error in the browser console:

Uncaught TypeError: elem.querySelectorAll is not a function
    at Ripple.js:XXX

This happens because mutation.addedNodes may include non-element nodes (like text nodes or comments), which don’t have the querySelectorAll method.

Here’s a minimal fix that prevents the error while keeping the script’s behavior intact:

mutation.addedNodes.forEach(function(elem) {
  if (!(elem instanceof HTMLElement)) return; // ✅ skip text nodes and comments
  
  var lazyElements = new Set(Array.from(
    elem.querySelectorAll(':is(.wds-button, .user-profile-navigation__link, .wds-floating-button, .wds-dropdown__toggle, .ViewMoreReplies, .content-size-toggle, [class^="ActionItem_action-item"], li, [class*="EntityTopBar_icon-trash-open"], .rich-text-editor__toolbar__icon-controls, .rich-text-editor__toolbar__icon-wrapper, button, .wikiEditor-ui-toolbar .oo-ui-buttonElement-button, .editOptions .oo-ui-buttonElement-button, .oo-ui-tool-link, .oo-ui-popupToolGroup-handle, .ui-button, .wikiEditor-ui-toolbar .page-characters div span, .wikiEditor-ui-toolbar .booklet > .index > div, .ve-fd-header__actions a, .ve-ui-summaryPanel-checkboxActionRow .oo-ui-buttonElement-button, .ve-ui-summaryPanel-checkboxActionRow .oo-ui-buttonElement):not(.has-ripple, .has-ripple.no-ink)')
  ));

  lazyElements.forEach(ripplesInit);
});

Adding if (!(elem instanceof HTMLElement)) return; ensures the observer ignores non-element nodes and prevents runtime errors.

After adding this line, everything in Ripple.js works perfectly — all ripple effects and dynamic elements behave as expected.

Thanks for the great script — it really enhances the UI and feels super smooth!

Gronox xgr 05:45, 25 October 2025 (UTC)