Closed Bug 1754809 Opened 4 years ago Closed 4 years ago

Chart on top.baidu.com blurry

Categories

(Core :: Graphics: WebRender, defect)

Product:
Core
Component:
Graphics: WebRender
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
99 Branch
Tracking Flags:
Tracking Status
firefox-esr91 --- unaffected
firefox97 --- unaffected
firefox98 --- unaffected
firefox99 + fixed

People

(Reporter: skyschub, Assigned: gw)

References

(Regression,
URL
)

Details

(Keywords: regression)

Attachments

(3 files, 1 obsolete file)

Screenshot, showing the blurry chart.
361.22 KB, image/png
Details
good.png
2.64 KB, image/png
Details
bad.png
3.83 KB, image/png
Details

As per the webcompat report at https://github.com/webcompat/web-bugs/issues/99398, the chart on https://top.baidu.com/board?platform=pc&sa=pcindex_entry is blurry. See the attached screenshot for an example.

This is a regression from bug 1749380, and according to Oana's testing in that webcompat report, this still reproduces in a 2022-02-10 Nightly, so it was not fixed by bug 1754336.

[Tracking Requested - why for this release]:

Visual issue that potentially can affect a lot of edge-cases we don't yet know about.

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

Just to be clear at what I'm looking at here - is the problem that the text glyphs are blurry and the rest of the graph looks OK?

I think they look slightly blurrier on my local machine, but it doesn't seem like a drastic difference (it probably depends a bit on things like screen resolution, device-pixel scale etc as to how bad it looks).

Flags: needinfo?(dschubert)
Attached image good.png —

Correct (previous rendering) of minimal test case

Attached image bad.png —

Blurry rendering after patch of minimal test case

A minimized test case below. It depends on having an opacity animation, and a text run on a fractional boundary, and a transform that is also fractional.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .c-font-normal {
        font: 13px/23px Arial, sans-serif;
      }

      .word-blink {
        animation: blink_15BvN 1s infinite alternate cubic-bezier(0.71, 0.01, 0.33, 1.02);
      }

      @keyframes blink_15BvN {
        0% {
          opacity: 0.9;
        }
        100% {
          opacity: 0.9;
        }
      }
    </style>
  </head>
  <body>
    <div class="c-font-normal">
      <svg id="" width="1920px" height="234px" viewBox="0 0 1920 234">
          <g transform="translate(-45, 7.491675)">
            <g class="word-blink">
              <text y="160.008325" x="416.543499" fontsize="14px">乔家的儿女</text>
            </g>
          </g>
      </svg>
    </div>
  </body>
</html>

Just to be clear at what I'm looking at here - is the problem that the text glyphs are blurry and the rest of the graph looks OK?

In Oana's screenshot, the graph itself is also slightly blurry, but it's most noticable in the text.

It probably depends a bit on things like screen resolution, device-pixel scale etc as to how bad it looks

Yeah. I don't even see this issue at all on a high-DPI display, but the lighter text from the screenshot (which was made on a lower-DPI screen) is really blurry. I'm not sure what the worst-case is here.

Flags: needinfo?(dschubert)

Reduced html case from above ported to a wrench test which is able to repro the problem:

root:
  items:
    - type: stacking-context
      bounds: [0, 0, 1920, 1200]
      transform: translate(-45, 7.491675)
      items:
      - type: stacking-context
        filters: [opacity(0.9)]
        items:
          - text: "This should be pixel aligned!"
            origin: 416.543499 160.008325
            size: 16

The problem lies in using a raster root spatial node that has a fractional translation or scale, when a snapping transform is active that includes this fractional value. I understand the problem fairly well now, just need to work out the best way to handle this case with the recent changes.

OK, I understand the problem well now.

I put up a try run here with a patch - https://treeherder.mozilla.org/jobs?repo=try&revision=a4ea56cac05eb65e983ea2ca75b59311b07acd69

It fixes the blurriness, but it's also quite a complicated change, and it causes a couple of other failures (minor fuzziness) in the try run.

I think I have another possible solution that would be simpler though - going to try that out on Monday.

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

status-firefox97: --- → unaffected
status-firefox-esr91: --- → unaffected
Has Regression Range: --- → yes

The attached patch fixes the blurriness for me locally on that page. However, I need to do a full try run to see if it breaks anything else before we can get it reviewed and merged.

Pushed by gwatson@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/6ad4a655b768 Handle fractional snapping with off-screen surfaces where possible r=gfx-reviewers,nical

Backed out as requested by gwatson

Flags: needinfo?(gwatson)

See https://bugzilla.mozilla.org/show_bug.cgi?id=1749380#c8 for more info about why this is backed out.

Flags: needinfo?(gwatson)

Fixed by backout. I will be re-landing this patch series next week, with changes that fix this issue. Please re-open if it occurs again.

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Attachment #9263682 - Attachment is obsolete: true
status-firefox99: affected → fixed
Target Milestone: --- → 99 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: