Pinch-zooming https://cdpn.io/jkantner/fullpage/VwKRgPy shows bad artifacts and Firefox eventually crashes silently
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: gregp, Assigned: gw)
References
Details
Attachments
(2 files)
Steps to reproduce:
- Navigate to about:config
- Set
layout.css.backdrop-filter.enabledtotrue - Restart the browser
- Navigate to https://cdpn.io/jkantner/fullpage/VwKRgPy
- 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
|
Reporter | |
Updated•3 years ago
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 1•3 years ago
|
||
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).
|
|
Assignee | |
Comment 2•3 years ago
|
||
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.
|
|
Assignee | |
Comment 3•3 years ago
|
||
The patch here should resolve the CPU time in 1742043 too.
|
||
Comment 5•3 years ago
|
||
| bugherder | ||
|
|
Assignee | |
Comment 6•3 years ago
|
||
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>
|
|
Assignee | |
Comment 7•3 years ago
|
||
The patch in https://bugzilla.mozilla.org/show_bug.cgi?id=1766498 should fix the remaining issue here too.
|
|
Assignee | |
Updated•3 years ago
|
|
||
Updated•3 years ago
|
Description
•