Scrollbar (unpredictably) stops working on PC
I'm seeing a really weird issue - https://rs2018.raffworks.com/ - on Firefox PC only, after opening a couple of the items up, the scrollbar completely stops working. Sometimes one item, sometimes three or four. But then bang! the scrollbar just locks up completely and it's impossible to scroll the page.
Has anyone experienced anything like this? Firefox on macOS is fine.
Chosen solution
OK - solved.
window.pageYOffset position on Firefox on my hybrid PC is being calculated as a double number, rather than an integer. This is known behaviour but I didn't know about it ;)
So when running a polyfill for window.scrollTo with "behaviour" set to "smooth" (which doesn't work on a number of browsers), the destination was sometimes not fully reached.
Say it was trying to scrollTo 635px - it would get to 634.9999991 - but as I was using strict equality checking ===, it never saw the loop as finished. Thus any attempt to manually scroll was overridden by the scrollTo loop.
Simply comparing the destination and current positions using Math.ceil has solved it.
Painful, but at least resolved. Much appreciate your help @FredMcD
Read this answer in context 👍 0All Replies (20)
Hi raffjones
Try disabling graphics hardware acceleration in Firefox. Start Firefox in Safe Mode. Click Start In Safe Mode (not Refresh). While you are in safe mode; disable graphics hardware acceleration
1. Click the menu button Menu and select Options. 2. Select the General panel. 3. Under Performance, uncheck Use recommended performance settings. Additional settings will be displayed. 4. Uncheck Use hardware acceleration when available. 5. Close Firefox completely and then restart Firefox to see if the problem persists.
Is this just on one website?
Many site issues can be caused by corrupt cookies or cache.
- Clear the Cache and
- Remove Cookies
Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.
- Cookies; Delete cookies to remove the information websites have stored on your computer {web link}
- Cache; How to clear the Firefox cache {web link}
If there is still a problem, Start Firefox in Safe Mode {web link} by holding down the <Shift> (Mac=Options) key, and then starting Firefox.
A small dialog should appear. Click Start In Safe Mode (not Refresh). Did this help?
While you are in safe mode;
Try disabling graphics hardware acceleration in Firefox. Since this feature was added to Firefox it has gradually improved but there are still a few glitches.
How to disable Hardware Acceleration {web link}
Thanks - I'd seen both of these suggestions elsewhere on the forums and previously tried both, but neither has any effect. This is on a completely fresh install of Firefox, so no possibility of corrupt cache or anything. I did follow the steps anyway - but it didn't work.
It is specific to this website at this point, but that's the one that matters to me as we are launching it.
The site works on everything else and there's nothing inherent in the site HTML / CSS / JavaScript that should cause an issue. Really strange.
Please provide a public link (no password) that we can check out. No Personal Information Please !
Remove History For One Site
Open the History Manager <Control><Shift> H. In the search bar, enter the name of the site. Right-click on one of the listings and select Forget About This Site. This should remove all information, including any passwords / settings.
Link - https://ruddstudio.com/ - no password is needed.
As I mentioned, this is only on PC. Firefox on macOS is fine.
I had no problem on my Win 7 Firefox v54
I did notice the scroll button 'jump' as I scrolled down and the page loaded more pictures.
https://support.mozilla.org/en-US/kb/update-firefox-latest-version?cache=no Did you update Firefox to the latest version 63.0.3 November 15, 2018
Some users have reported issues with the current version. If the update does not help, think about trying v61 or v62.
raffjones said
I'm seeing a really weird issue - https://rs2018.raffworks.com/
raffjones said
Link - https://ruddstudio.com/ - no password is needed.
Does using either link make any difference?
@FredMcD Thanks for looking into this.
No - they are effectively the same codebase. https://ruddstudio.com/ is now the live site. We decided to push on as this bug is hard to reproduce in Firefox meaning it could be a hardware problem with my Lenovo Yoga PC.
https://rs2018.raffworks.com/ is the beta / staging version. One is just a bigger build with debugging in place for the dreaded IE.
Sorry - meant to say that yes, this issue is happening for me on a fresh install of the latest Firefox: 63.0.3
FredMcD said
Some users have reported issues with the current version.
Install Older Version Of Firefox {web link} Be sure to read everything here.
If you still want to downgrade, look under; I still want to downgrade. Click the Directory of other versions and languages link. Look for the directory of the version that you want. But, remember that old versions may have security issues.
You should also check out Firefox; Extended Support Release {web link} ESR Notes System Requirements
Thanks @FredMcD - much appreciated.
I downgraded to 54, but the problem is still present. Completely locks up after opening up a few items. Sometimes one, sometimes 4, but eventually the page fails and cannot be scrolled. I can't figure out why it's working for you on v54 but not me. It could be a hardware issue on my side, but as it's totally fine in all other browsers, I can't see how that would be the case.
raffjones said
Completely locks up after opening up a few items
What items? The only links are at the bottom of the page.
if you click on an image in the page, it will animate up and left, and reveal some copy + sometimes a slideshow.
After doing this on a few of the images, the page locks up completely in Firefox.
I found it. I played around for a while but had no problem.
Did you check out Firefox Safe Mode?
Hi @FredMcD - thanks again for persevering with this.
I did try both Safe Mode and turning off hardware graphics acceleration. Performance was then shockingly bad, but the problem also persisted so that is not a solution.
I have had the problem confirmed by another friend who uses Firefox on the PC. The common factor is that both of us use hybrid PCs that also have a touch screen. I wonder if that could be a factor? Though exactly how I have no idea. This is the first time I've ever experienced an issue like this.
I called for more help.
Hi @FredMcD - thanks for that.
It is rare that I truly hit the wall with web development, but this is one of those times. I've no idea what to do as it doesn't seem to be related to the HTML, the CSS or the JavaScript. I'm really hoping some ninja who knows the inner workings of Firefox can help to diagnose this.
Update on this thread. I have found the source of the bug.
The problem was found on 2 hybrid PCs which also have a touch screen.
One part of the code uses "requestAnimationFrame" to scroll the page into position when opening up an image. When this code is removed, everything is fine.
I am now investigating why the normal triggers to stop that animation loop don't fire on these machines, and will report back. Very strange that it is limited to such a very small subsection of browser/device combination...
Chosen Solution
OK - solved.
window.pageYOffset position on Firefox on my hybrid PC is being calculated as a double number, rather than an integer. This is known behaviour but I didn't know about it ;)
So when running a polyfill for window.scrollTo with "behaviour" set to "smooth" (which doesn't work on a number of browsers), the destination was sometimes not fully reached.
Say it was trying to scrollTo 635px - it would get to 634.9999991 - but as I was using strict equality checking ===, it never saw the loop as finished. Thus any attempt to manually scroll was overridden by the scrollTo loop.
Simply comparing the destination and current positions using Math.ceil has solved it.
Painful, but at least resolved. Much appreciate your help @FredMcD
Modified