`socialIcons` disappear when ad blockers are enabled.

[ryouze]

I noticed that the socialIcons (GitHub, E-mail, Twitter, etc.) disappear after my site is deployed via GitHub Actions. At first, I thought it might be a caching issue, but after testing on multiple browsers and devices, the icons still wouldn’t appear. The GET requests for the images are being made, but they just don’t render (except in Safari).

After digging deeper, I found out that ad blockers are causing this issue. It seems like SVGInjector is triggering them, but this requires further investigation. What’s odd is that the icons show up perfectly when running the site locally with hugo server.

Is this something that could realistically be fixed without breaking the current API? I understand that most users don’t use ad blockers, so this might be outside the scope of the project, but I thought I’d ask anyway.

<a href="https://example.com" aria-label="Learn more on twitter">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="injected-svg svg-inject"><title>Twitter</title><path d="..."></path></svg>
</a>

// assets/js/main.js

const svgsToInject = document.querySelectorAll('img.svg-inject');
SVGInjector(svgsToInject);

Broken: Firefox with uBlock Origin (macOS)

Broken: Chrome with uBlock Origin Lite (macOS)

Broken: Safari with AdGuard Pro (iOS)

Also the footer breaks in landscape view when ad block is enabled.

Working: Safari with Wipr (macOS)

[ryouze]

I completely forgot about the logger in uBlock Origin 🫢

The issue is caused by the ##.social-icons-list filter. If you disable the EasyList – Social Widgets filter, the icons show up as expected. Perhaps the .social-icons-list class could be renamed.

[jamesericdavidson]

Using uBlock Origin as an example, this breakage is entirely dependent on the filters and rules you are using. The default Easy mode has zero issues. @ryouze You already identified this as I was making this comment.

Trying to solve for millions of different browser configurations in this repo is folly.

[ryouze]

I fixed the issue on my end by renaming social-icons-list to gk-social-icons-list (with gk standing for Gokarna).

Would you like me to submit a PR? I understand the issue comes from an overly aggressive adblock filter, which isn’t enabled by default.