Closed Bug 1863688 Opened 2 years ago Closed 2 years ago

if the built-in pdfViewer of firefox is placed over a canvas, the pdf content disappears if you apply css "transform: translate" to the pdfViewer (new in Firefox 120 developer) on Windows

Categories

(Core :: Graphics: WebRender, defect)

Product:
Core
Component:
Graphics: WebRender
Version:
Firefox 120
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
121 Branch
Tracking Flags:
Tracking Status
firefox-esr115 --- unaffected
firefox119 --- unaffected
firefox120 --- verified
firefox121 --- verified
firefox122 --- verified

People

(Reporter: j.schoenemeyer, Assigned: gw)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

canvas.7z
29.28 KB, application/x-7z-compressed
Details
Bug 1863688 - Fix translucent + opaque RGBA compositor surface overlays.
48 bytes, text/x-phabricator-request
diannaS
: approval-mozilla-release+
Details | Review
Attached file canvas.7z —

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0

Steps to reproduce:

create a html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="same-origin" />

<title>Test Canvas + PDF Viewer</title>

<style>
  body, html {
    margin:  0;
    padding: 0;
  }

  body {
    position: absolute;
    left: 0;
    top:  0;
    width:  100%;
    height: 100%;

    background-color: yellow;
  }

  .canvasWrapper {
    width:   50%;
    height: 100%;
  }

  .pdf {
    position: absolute;
    left: 0;
    top:  0;
    width: 100%;
    height: 50%;
  }

  .pdfViewer {
    position: absolute;
    right: 20px;
    top:  20px;

    width:  calc(50% - 40px);
    height: calc(100% - 20px);
  }

  .left .pdfViewer {
    left: 20px;
  }

  .buttonWrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    width:  100%;
    bottom: 50px;
  }

  .buttonWrapper button {
    margin: 0 10px;
  }

  .transform {
    transform: translateY(10px);
  }
</style>

<script>
  function addTransform(){
    pdf.classList.add( "transform" );
  }

  function removeTransform(){
    pdf.classList.remove( "transform" );
  }

  function pdfOverCanvas(){
    pdf.classList.add( "left" );
  }

  function pdfNotOverCanvas(){
    pdf.classList.remove( "left" );
  }

  function fillCanvas(){
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 150, 100);
  }
</script>

</head>

<body>
<div class="canvasWrapper">
<canvas id="canvas"></canvas>
</div>

<div id="pdf" class="pdf">
  <object class="pdfViewer" data="TEST_PDF.pdf" type="application/pdf"></object>
</div>

<div class="buttonWrapper">
  <button onclick="addTransform()">add css transformY +10px</button>
  <button onclick="removeTransform()">remove css transformY</button>

  <button onclick="pdfOverCanvas()">PDF over CANVAS</button>
  <button onclick="pdfNotOverCanvas()">PDF not over CANVAS</button>
</div>

<script>
  fillCanvas();
</script>

</body>
</html>

https://www.feldmannmediagroup.com/test/public/juergen/canvas_and_pdfViewer/

click on button "add css transforY +10px" => ok
click on button "PDF over CANVAS" => content of the pdf viewer is lost
click on button "remove css transform>" => content of the pdf viewer is ok

Actual results:

screen recording:
https://360.articulate.com/review/content/0275b74d-263e-4277-911a-944bf7ef77d3/review

tested with INTEL i7 gen 4, i5 gen 8, AMD Ryzen 3

Expected results:

content of the internal pdf viewer should NOT disappear, if css "transform: translate" is used for the pdf viewer

The Bugbug bot thinks this bug should belong to the 'Firefox::PDF Viewer' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → PDF Viewer

Thank you for the test case.
In using mozregression, I found that it's a regression from bug 1849680.
:gwatson, could you have a look please ?

Status: UNCONFIRMED → NEW
status-firefox120: --- → affected
status-firefox121: --- → affected
Component: PDF Viewer → Graphics: WebRender
Ever confirmed: true
Flags: needinfo?(gwatson)
Keywords: regression
Product: Firefox → Core
Regressed by: 1849680

Set release status flags based on info from the regressing bug 1849680

status-firefox119: --- → unaffected
status-firefox-esr115: --- → unaffected
Severity: -- → S3
Flags: needinfo?(gwatson)

:gw, since you are the author of the regressor, bug 1849680, could you take a look?

For more information, please visit BugBot documentation.

Flags: needinfo?(gwatson)
Assignee: nobody → gwatson
Flags: needinfo?(gwatson)

I can reproduce this on Windows (whether DC is enabled or not), but not on Linux, which is surprising.

Doesn't reproduce on Mac either, but does repro on Windows whether using sw-wr / hw-wr / DC.

Summary: if the built-in pdfViewer of firefox is placed over a canvas, the pdf content disappears if you apply css "transform: translate" to the pdfViewer (new in Firefox 120 developer) → if the built-in pdfViewer of firefox is placed over a canvas, the pdf content disappears if you apply css "transform: translate" to the pdfViewer (new in Firefox 120 developer) on Windows

Thanks for the detailed test case and repro.

Current progress:

Disabling the is_opaque check at [1] means the bug doesn't repro, so there must be an issue with how we select over/underlay mode, or perhaps one of those compositor surfaces is being incorrectly tagged as opaque when it shouldn't be.

[1] https://searchfox.org/mozilla-central/source/gfx/wr/webrender/src/picture.rs#3106

Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/00534ecc53ab Fix translucent + opaque RGBA compositor surface overlays. r=gfx-reviewers,lsalzman

https://hg.mozilla.org/mozilla-central/rev/00534ecc53ab

Status: NEW → RESOLVED
Closed: 2 years ago
status-firefox121: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → 121 Branch

The patch landed in nightly and beta is affected.
:gw, is this bug important enough to require an uplift?

  • If yes, please nominate the patch for beta approval.
  • If no, please set status-firefox120 to wontfix.

For more information, please visit BugBot documentation.

Flags: needinfo?(gwatson)
status-firefox120: fix-optional → wontfix
Flags: needinfo?(gwatson)
Flags: qe-verify+

(In reply to Pulsebot from comment #9)

Pushed by gwatson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/00534ecc53ab
Fix translucent + opaque RGBA compositor surface overlays.
r=gfx-reviewers,lsalzman

== Change summary for alert #40317 (as of Tue, 21 Nov 2023 19:22:26 GMT) ==

Improvements:

Ratio Test Platform Options Absolute values (old vs new)
5% glterrain linux1804-64-shippable-qr e10s fission stylo webrender-sw 2.60 -> 2.46
5% glterrain linux1804-64-shippable-qr e10s fission stylo webrender-sw 2.59 -> 2.46

For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=40317

Comment on attachment 9363795 [details]
Bug 1863688 - Fix translucent + opaque RGBA compositor surface overlays.

Beta/Release Uplift Approval Request

  • User impact if declined: Incorrect rendering in some cases with overlapping canvas / pdf views.
  • Is this code covered by automated tests?: Yes
  • Has the fix been verified in Nightly?: Yes
  • Needs manual test from QE?: Yes
  • If yes, steps to reproduce: Per repro steps in bug.
  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Small patch, fixes a visible bug, has reasonable test coverage.
  • String changes made/needed:
  • Is Android affected?: Yes
Attachment #9363795 - Flags: approval-mozilla-release?

I was able to reproduce the issue on Win10x64 using FF build 120.0 and the steps from description.
Verified as fixed on Win10x64 using FF builds 121.0b4 and 122.0a1.

status-firefox121: fixed → verified

Comment on attachment 9363795 [details]
Bug 1863688 - Fix translucent + opaque RGBA compositor surface overlays.

Approved for 120.0.1 dot release

Attachment #9363795 - Flags: approval-mozilla-release? → approval-mozilla-release+
QA Whiteboard: [qa-triaged]

Verified as fixed on Win10x64/Mac14.1 using FF builds 120.0.1 and 122.0a1(2023-12-05).

Status: RESOLVED → VERIFIED
status-firefox120: fixed → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: