Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 04:41:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1932236 - Add documentation for animating the browser content area in docs/performance/bestpractices.md r=mconley,emilio

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D229542
This commit is contained in:
Kelly Cochrane 2024-11-20 17:51:29 +00:00
parent 5b5ae75604
commit 25b72de5d9
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/performance/bestpractices.md
View File

@ -366,6 +366,27 @@ This also implies that *querying for size and position information* in
*requestAnimationFrame()* has a high probability of causing a
synchronous reflow.
### Animating the content area
There are certain scenarios where we might want to add animations that involve changing the size or position of the browser content area, but we should be careful to do so in a performant way.
Animating via a screenshot overlay of the content area should be avoided for the following reasons:
1. The `selectedBrowser.browsingContext.currentWindowGlobal.drawSnapshot()` method uses the fallback painting rendering path, which is not very efficient and doesn't support `backdrop-filter`. The screenshot overlay animation would therefore not look as expected on pages that makes heavy use of `backdrop-filter`.
2. It's also fairly tricky to get the zoom-levels correct when using this method.
Animating the width of the content area should also be avoided to prevent costly layout reflows.
Instead, we should rely solely on compositor-powered animations and transforms/translations when possible to prevent recomputing layout each frame.
For example, if we want to show the effect of a sidebar sliding out and the browser content area shrinking to fit it in, we should:
1. Translate the sidebar into frame, whilst also
2. Translating the <browser> element out of its way, and then
3. Once the translations are done, resize the <browser> element for its new position in a single frame
and do the reverse for collapsing that sidebar.
### Other useful methods
Below you'll find some suggestions for other methods which may come in