Page navigation within a thread DISAPPEARS when Adblock is enabled

[rob-kemmetmueller]

Describe the bug
Using a site that has Kunena Forum 6.3.9 (yeah I know, that's not a stable release; it's not MY site. |EDIT: The doc page I went to said 6.3.8 was the latest stable release, but that might be obsolete info? Anyway, it's 6.3.9)

I complained to the admin that I couldn't navigate from page to page WITHIN a thread; the only way to switch pages was to go back to the list of topics, which was obviously some kind of bug.
They said it worked fine for them (Firefox on Linux), so I looked into it myself further.

I'm on Safari 18.3 on MacOS 13.7.1, and had Adblock enabled.

Poking around in the DOM with browser dev tools, I observed that .d-sm-block was lumped in with a bunch of styles that had display:none because they contained ads... which is probably why the forum (thread-) page navigation wasn't showing up.

Turning off Adblock for the site "fixed" it.

To Reproduce
Steps to reproduce the behavior:

1. Visit any multi-page thread with Adblock installed and enabled. (in Safari?)
2. Scroll down to the bottom of the page where the page navigation ought to be.
3. Observe that NO page navigation is visible.

Expected behavior
Page navigation within a thread ought to be visible and usable even with Adblock running.

Actual result
The page navigation is HIDDEN/INVISIBLE. It's in the DOM but you can't see it or click on it.

Screenshots

System information (please complete the following information)

Joomla version: N/A
Kunena version: 6.3.9
Php version: N/A
Database version: N/A

Desktop (please complete the following information):

• OS: macOS 13.7.1 (* possibly N/A)
• Browser: Safari (* possibly N/A)
• Version: 18.3 (* possibly N/A)

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser: N/A
• Version: N/A

Additional context
PRETTY sure I didn't do any funky "configuring/customization" of Adblock to make it be so aggressive with the .d-sm-block CSS tag; the forum site I was using HAS no ads; I'd installed the free edition of Adblock for a completely different annoying website.

[github-actions]

Thank you for the report, we will looking soon at the issue

[Pinkeltje]

First of all your info is not complete:
Joomla version: N/A
Kunena version: 6.3.9
Php version: N/A
Database version: N/A
Do you experience this only with Kunena or with Joomla navigation as well?

Using a site that has Kunena Forum 6.3.9 (yeah I know, that's not a stable release; it's not MY site)

Kunena 6.3.9 definitely is stable

[rob-kemmetmueller]

There's no issue with the page navigation on other parts of the site.
e.g. the blog has

<div class="com-content-category-blog__navigation w-100">
                            <p class="com-content-category-blog__counter counter float-md-end pt-3 pe-2">
                    Page 1 of 11                </p>
                        <div class="com-content-category-blog__pagination">
                <nav class="pagination__wrapper" aria-label="Pagination">
    <ul class="pagination ms-0 mb-4">
            <li class="disabled page-item">
        <span class="page-link" aria-hidden="true"><span class="icon-angle-double-left" aria-hidden="true"></span></span>
    </li>
            <li class="disabled page-item">
        <span class="page-link" aria-hidden="true"><span class="icon-angle-left" aria-hidden="true"></span></span>
    </li>

                            <li class="active page-item">
        <a aria-current="true" aria-label="Page 1" href="#" class="page-link">1</a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 2" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=5" class="page-link">
            2        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 3" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=10" class="page-link">
            3        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 4" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=15" class="page-link">
            4        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 5" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=20" class="page-link">
            5        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 6" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=25" class="page-link">
            6        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 7" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=30" class="page-link">
            7        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 8" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=35" class="page-link">
            8        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 9" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=40" class="page-link">
            9        </a>
    </li>
                        <li class="page-item">
        <a aria-label="Go to page 10" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=45" class="page-link">
            10        </a>
    </li>
        
            <li class="page-item">
        <a aria-label="Go to next page" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=5" class="page-link">
            <span class="icon-angle-right" aria-hidden="true"></span>        </a>
    </li>
            <li class="page-item">
        <a aria-label="Go to last page" href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=101&amp;limitstart=50" class="page-link">
            <span class="icon-angle-double-right" aria-hidden="true"></span>        </a>
    </li>
    </ul>
</nav>
            </div>
        </div>

and none of those CSS classes are set to not display.

Because, as you can see, none of them have a d-sm-block class on them, and none of the classes they DO have are in that list of CSS classes that AdBlocker seems to think are "suspicious" and hides.

Similarly, the pagination on the topic-list page works fine, including the page numbers of each thread shown there:

<div class="float-start">
            
<div class="pagination pagination-small">
    <ul class="pagination">
        <li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;catid=17&amp;id=399&amp;Itemid=1258&amp;limitstart=0" data-bs-toggle="tooltip" title="Page:1">1</a>
		  </li><li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;catid=17&amp;id=399&amp;Itemid=1258&amp;limitstart=6" data-bs-toggle="tooltip" title="Page:2">2</a>
		  </li>    </ul>
</div>
        </div>

The ONLY place that pagination is broken/hidden/unclickable is when you're viewing a forum thread.

<div class="float-start">
        
<nav class="d-none d-sm-block">
    <ul class="pagination ms-0">
        <li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;defaultmenu=1260&amp;Itemid=1258&amp;catid=17&amp;id=399&amp;limitstart=0" data-bs-toggle="tooltip" title="Page:Start">Start</a>
		  </li><li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;defaultmenu=1260&amp;Itemid=1258&amp;catid=17&amp;id=399&amp;limitstart=0" data-bs-toggle="tooltip" title="Page:Prev">Prev</a>
		  </li><li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;defaultmenu=1260&amp;Itemid=1258&amp;catid=17&amp;id=399&amp;limitstart=0" data-bs-toggle="tooltip" title="Page:1">1</a>
		  </li><li class="page-item active"><a class="page-link">2</a></li><li class="page-item disabled"><a class="page-link">Next</a></li><li class="page-item disabled"><a class="page-link">End</a></li>    </ul>
</nav>

<nav class="d-block d-sm-none">
    <ul class="pagination ms-0">
        <li class="page-item">
			<a class="page-link" href="/index.php?option=com_kunena&amp;view=topic&amp;defaultmenu=1260&amp;Itemid=1258&amp;catid=17&amp;id=399&amp;limitstart=0" data-bs-toggle="tooltip" title="Page:1">1</a>
		  </li><li class="page-item active"><a class="page-link">2</a></li>    </ul>
</nav>
    </div>

It's the <nav class="d-none d-sm-block"> that's the problem.

I don't know how the two classes are supposed to interact, but if I rename them to d-xxx-none and d-xxx-sm-block (directly, in the DOM, with DevTools), the navigation shows up.
If I only rename one or the other or neither, the navigation is invisible.
It would seem because d-none is invisible and d-sm-block SHOULD be overriding that and making it visible, but AdBlocker apparently thinks the .d-sm-block CSS class has ads in it.

[rob-kemmetmueller]

I have no friggin' idea what version of PHP or Joomla or database the site is running. I'm not a site admin, I only use it. And it doesn't seem particularly relevant anyway. The site administrator was nice enough to tell me the Kunena Forum version that's in use, but he doesn't give enough of a flying rat's ass about Apple, Safari, OR AdBlocker to entertain any further interrogation.

But I thought maybe someone who works on it might give a flying rat's ass, so I opened this GitHub issue to let you know. 🤷

[rob-kemmetmueller]

I found a workaround myself and I can use the site's forum effectively now, so I don't really care whether it gets fixed or not either.

And I'm not trying to tell you how to do your volunteer/jobs either, but I'm going to speculate that if the class was named "d-nav-block" instead of "d-sm-block", AdBlocker would have no effect on it.

(I'm no AdBlocker expert, but that sure looks like a great big generic laundry list of CSS tags that contain ads on any and all sites; like, it's not dynamically reacting to the content of the Kunena Forum page -- it's just a friggin' canned list of "the usual suspects" and the Kunena Forum thread-page generator got swept into the fray just because it used a CSS class named "d-sm-block" and some OTHER site uses a CSS class with the same name as a container wrapper for ads.)

[rob-kemmetmueller]

Oh yeah, and since I'm theorizing that the browser isn't relevant anyway (didn't test other browsers myself), the ad-blocking software specifics are:
AdBlock Version 2.1.9 (198)