Thursday, August 24, 2023

Fixing Scrolling & Clickable Issues on Chrome

Go to solutions

Some (discussion) Webpages (e.g., nextcloud, pi-hole) work fine at the first visit (Figure 1) when there is no cookie in place.  In the subsequent visits or refresh, the pages immediately become unscrollable (Figure 2) and all buttons and links are not functioning.  This situation has nothing related to the right-click being controlled.  These scrolling & clickable issues on Chrome are most likely in conflict with one or more installed Chrome extensions.

For example, if Auto Quality for YouTube extension is installed, the following pages won't be able to scroll after the first or initial visit of the Website.  Buttons or links are also unclickable.  In this case, the pages have no scrollbar and the internal scrollbar is also disabled if it exists (Figure 2).  

https://help.nextcloud.com/t/ai-in-nextcloud-what-why-and-how/166916

https://discourse.pi-hole.net/c/feature-requests/

https://discourse.pi-hole.net/t/filter-querylog-toplist-by-query-response-nxdomain/62914 

Figure 1.  Normal View at First Visit

Figure 2.  Non-scrollable after refreshscrolling and clickable issues

Figure 3.  Clear the Specific Site's CookieDelete the site cookie

Deleting the specific site cookie (Figure 3) will fix these issues once, but they will resume shortly after a simple refresh.  Apparently, clearing the site cookie is NOT a solution.

I also found that Websites using similar UI layout on Chrome may suffer the same issues.  Of course, there are some exceptions  The following two are one of the exceptions.

https://community.volumio.com/

https://community.octoprint.org/

It looks to me that these issues are somewhat related to caching and cookies.  Regardless of what causes it, here are some solutions that work for me.

Solutions

In my case, there are three (3) solutions.  I personally prefer the first or the second solution depending on my needs.

1. Hard Refresh

It is a simple solution without tempering anything.  Simply do a hard reload on the page should do the trick.

  • With mouse, do Shift-Click. 
  • With keyboard, do Ctrl-Shift-R.
    Hard Reload
2. Cookie Control

Disabling the site to store cookies will cause Service Worker registration to fail and no longer to work with cache.  This approach may cause errors if the site heavily relies on cookies.  Fortunately, it has been working fine for me so far.

  • Go to chrome://settings/content/siteData, and then
    scroll down to "Not allowed to save data on your device" section.

    Go to Chrome site data page

  • Click "Add" button to add the site

    Add the site into disallow to place cookies

  • As soon as the entry is added, simply refresh the page of the Website to see the effect.

    After having added an entry, refresh the page to see the effect
Also see how to allow or block cookies for a specific site on Google Chrome Help for details if needed.

3.  Temporarily off or Disable Extension

If one or more extension are installed with Chrome in conflict with the Webpage, it will be time consuming to find it out manually.  Uninstalling the extension is a long-term solution if the extension is no longer needed.  Most of time, it is not the case.  Then consider temporarily to disable it.

  • Go to chrome://extensions/
  • Slide on or off the extension to enable or disable it

    Enable or disable the extension from chrome

Hope that one the above solutions may work for you.  I would also like to hear from you if you have alternatives to resolve this.

No comments:

Post a Comment