[Resolved] ‘Scroll to the top’ button doesn’t work on mobile

[culpable]

Hi,

The “Scroll to the top” button loads on both mobile on desktop.

On desktop, it works as intended – it scrolls immediately to the top.

But when clicked on mobile, it scrolls to the top at a snail’s pace (extremely slowly, as in a couple of pixels per second).

I tried the fixes here: https://generatepress.com/forums/topic/scroll-to-the-top-button-and-hyperlinks-do-not-work-on-mobile/

But to no avail.

I also tried disabling WP rocket altogether, but that also didn’t help.

Please help 🙂

[Fernando]

Hi Cupable,

There may be a plugin conflict. Can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

[culpable]

Hi Fernando,

Thank you for your help.

So it seems that the issue is related to a GP Element that was loading the following Bootstrap CSS script via a hook in wp_head:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Any idea why this might be the case, and how to fix it (while still loading this CSS script)?

Just looking at the code, I was suspicious of this line:

{:root{scroll-behavior:smooth}}

But overriding this to {scroll-behavior:auto} (and confirming that it had actually been overridden) did not fix the issue.

[David]

Hi there,

add this CSS to make sure the scroll-behaviour that bootstrap adds has been unset:

:root {
    scroll-behavior: unset !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[culpable]

Hi David,

Ha, so it was that part of the CSS!

unset was a better idea than auto… no wonder my CSS wasn’t working.

It’s working now, thank you very much for your help.

Out of curiosity, do you know why it was only broken on mobile, and not on desktop?

[David]

It was affecting my desktop too.
That CSS was being loaded on this condtion: @media (prefers-reduced-motion: no-preference) so theres a chance that your desktop browser may have a difference motion preference set.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[culpable]

Great pickup David. Thank you for the fix and the additional information.

The issue is resolved now; have a fantastic day.

[Author]

Posts