Javascript workaround for slow scrolling with smooth scrolling in firefox

Question

I am a developer for a web application. In this application, there is a certain scenario in which there are several positions: fixed elements and canvases and overflow element: scroll. In this case, scrolling is very slow in Firefox when smooth scrolling is enabled.

From the user's point of view, the solution simply disables smooth scrolling. However, as a developer, I cannot guarantee that the user has done this.

Is there somewhere that I can tell firefox not to use smooth scrolling for my site from javascript (or html)? Or is there another known workaround for this?

Answer 1

I understand that your question basically is how to disable smooth scrolling. however, I will answer you a little differently to make this work.

Why different?

Even if you can detect smooth scrolling of users, you cannot force the user to disable it. In other words, you are trying to solve the problem, not solve it. therefore, allows you to solve this problem!

Introduction: the outline of the pixels to the screen

In each frame, the browser performs the following steps to display the page on the screen.

• Javascript

  . Typically, JavaScript is used to handle work that will lead to visual changes, whether it be a jQuerys animation function, sorting a dataset, or adding DOM elements to a page. It doesn't have to be JavaScript that causes a visual change: CSS Animations, Transitions, and the Web Animation APIs are also widely used.

• Calculation of style. This is the process of determining which CSS rules apply to which elements are based on their respective selectors, for example..headline or .nav> .nav__item. From there, as soon as the rules are known, they are applied and the final styles for each element are calculated.

• Layout Once the browser finds out what rules apply to the element, it can begin to calculate how much space it takes and where it is located on the screen. A website layout model means that one element can affect others, for example. the width of an element usually affects the width of its children, etc. up and down the tree, so the process can be quite involved for the browser.

• Paint

  . Painting is the process of filling pixels. This includes the deletion of text, colors, images, borders and shadows of essentially every visual part of the elements. A drawing is usually done on several surfaces, often called layers.

• Compositing

  . Since parts of the page were drawn in potentially several layers, they need to be drawn on the screen in the correct order for the page to display correctly. This is especially important for elements that overlap each other, since an error can cause one element to display incorrectly on top of the other.

details and source: https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

Step 1:

The first step is to remove the render of the expensive css properties. You may not be able to remove a lot, but you can replace rgba(255,255,255,1); to #fff , which removes the alpha layer.

check this for more details: https://csstriggers.com/ some properties do not need to do layout or paint , and they are less heavy than others.

Step 2:

Check triggers forced synchronous layout . This happens when you force the browser to do layout while it is in the javascript step, and then return to javascript, instead of smoothly walking along the pipeline on every frame. to do this, avoid getting layout attributes and setting them immediately afterwards in a loop, for example.

here is a list of what triggers the sync build: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

more details: https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en

Step 3:

Move the components on the page that you want to regularly repaint in new layers.

The browser needs to repaint each time it scrolls or animates. to avoid overflowing the full page and only redraw the part that changes, move this part (ex parallax, navigation, animation) to a new layer in the browser (think of it as Photoshop layers).

to do this, use the will-change css property to tell the browser to move it to a new layer and use transform: translateZ(0); if you want to force the browser to move it.

Answer 2

Have you tried adding

 backface-visibility: hidden; 

for fixed position items?

I would rather fix the source of the problem. Often there is one small detail that creates a gigantic bottleneck, and this can easily be fixed if you change one line of code or something else. Please note that you most likely will not need to reduce the "good appearance" of the application at all; it's just a matter of avoiding the small but destructive to performance details of the browser layout mechanism.

I will make an assumption and say that something in your web application causes very large redraws and / or frequent re-melting. Check out things like using offsetTop and position: fixed . Also, using requestAnimationFrame instead of updating for each scroll event is something worth paying attention to. Here is a good guide to finding and fixing performance scrolling issues.

Answer 3

Use the validation element to try to get a handle for a specific reason. In addition, if you did not install FireBug, install it and use the default validation element instead. This will give you more details of the code and allow you to go through the script to find the problem. There are also FireBug plugins for various frameworks that can help with diagnostics if you use one of these frameworks.

We can make assumptions about the cause or come up with shotgun solutions; but only you can diagnose your code to find the specifics.