Closed Bug 1765520 Opened 2 years ago Closed 2 years ago

Pinch-zooming https://cdpn.io/jkantner/fullpage/VwKRgPy shows bad artifacts and Firefox eventually crashes silently

Categories

(Core :: Graphics: WebRender, defect)

Firefox 101
x86_64
Linux
defect

Tracking

()

RESOLVED FIXED

People

(Reporter: gregp, Assigned: gw)

References

Details

Attachments

(2 files)

Attached video recording.webm

Steps to reproduce:

  1. Navigate to about:config
  2. Set layout.css.backdrop-filter.enabled to true
  3. Restart the browser
  4. Navigate to https://cdpn.io/jkantner/fullpage/VwKRgPy
  5. Pinch-zoom the webpage

Actual results:

Very bad artifacts and tearing, Firefox eventually hangs or crashes silently after a while as well.

Expected results:

Smooth pinch zooming with no artifacts, no crashes or hangs

If you do not have a touchpad capable of pinch-zooming, it can be simulated by setting mousewheel.with_alt.action to 5 in about:config

Component: Untriaged → Graphics: WebRender
OS: Unspecified → Linux
Product: Firefox → Core
Hardware: Unspecified → x86_64
Blocks: 1749625
Keywords: leave-open
Assignee: nobody → gwatson

When there are a large number of sibling backdrop-filter primitives
present, the existing naive recursive traversals to assign the
render_on and free_after passes hit pathological cases. In
the test case for this bug, a debug build takes 12+ seconds to
complete on my development machine.

Instead, switch to a topological sort for render_on assignment,
and use a non-recursive traversal to set free_after (which relies
on having the passes in-order from the topo sort to avoid recursion).

The attached patch above fixes the hangs and crashes, however there are still artifacts visible during pinch-zoom - so the complete fix for this will involve two patches.

See Also: → 1742043

The patch here should resolve the CPU time in 1742043 too.

Pushed by gwatson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/935961767c79
Use a faster traversal for render_on / free_after r=gfx-reviewers,lsalzman

A minimal test case for the artifacts when pinch-zooming:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      div {
        position: absolute;
        width: 100px;
        height: 100px;
      }
      .bf {
        top: 50px;
        left: 50px;
        background: rgba(255,255,255,0.5);
        backdrop-filter: invert(1);
      }
    </style>
  </head>

  <body>
    <div style="background: red; top: 0px; left: 0px;"></div>
    <div style="background: green; top: 0px; left: 100px;"></div>
    <div class="bf"></div>
  </body>
</html>
See Also: → 1766498
Blocks: 1718471

The patch in https://bugzilla.mozilla.org/show_bug.cgi?id=1766498 should fix the remaining issue here too.

Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: