Closed Bug 1242145 Opened 8 years ago Closed 4 years ago

Diagonal checkerboard (CSS) rendering issue

Categories

(Core :: Graphics, defect, P3)

36 Branch
Unspecified
Windows 7
defect

Tracking

()

RESOLVED WORKSFORME
Tracking Status
firefox42 --- wontfix
firefox43 --- wontfix
firefox44 --- wontfix
firefox45 --- wontfix
firefox46 --- wontfix
firefox47 --- wontfix
firefox-esr38 --- wontfix
firefox-esr45 --- wontfix
firefox57 - wontfix

People

(Reporter: mark, Unassigned)

References

Details

(Keywords: regression, Whiteboard: [gfx-noted])

Attachments

(3 files)

Creating a simple diagonal checkerboard pattern for a page background, I found out that Firefox renders this wrong.

The checkerboard is created with pure CSS like so:

<body style="height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-image: linear-gradient(45deg, #f8f8f8 25%, transparent 25%), 
      linear-gradient(-45deg, #f8f8f8 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
      linear-gradient(-45deg, transparent 75%, #f8f8f8 75%);
background-size:50px 50px;
background-position:0 0, 50px 0, 50px -50px, 0px 50px;">

See attached image for the results. It's kind of an interesting effect but not what i was aiming for ;)

This renders correctly if HWA is disabled in options and the cairo back-end is used, but not with D2D.
Attached file HTML testcase
HTML testcase attached for quick testing.
There are 2 regression.
#1, The diagonal line is like
xxxxx
xxxxx
#2, The diagonal line is like
vvvvv
vvvvv

#1 Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=68bcfde4e82a&tochange=db5e3bb3205d

#1 Regressed by: Bug 895135


#2 Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=333d512a000d&tochange=171e352854e7

#2 Regressed by: Bug 591600
Blocks: 895135, 591600
Flags: needinfo?(jmuizelaar)
Cannot reproduce on Firefox 43.0.4; shows as expected.
(In reply to Erwin Dokter from comment #3)
> Cannot reproduce on Firefox 43.0.4; shows as expected.

Maybe your HWA is disabled or your GPU is blocked or something.
Fully HW enabled here AFAICT. Have you tried more then one system?
I can confirm this in latest Nightly 46.0a1 build 20160123030348
Whiteboard: [gfx-noted]
next steps?
Flags: needinfo?(milan)
The regression range from comment 2 is from 25 and 36.  I don't know what we want to block the release with it.
Flags: needinfo?(milan)
Assignee: nobody → milan
For the record, the gradient color space calculation from 25 was already discussed also on the www-style mailing list so that likely wants to be reverted anyway for more accurate and expected gradients. Doing so may solve this issue?
Results from my own work on this:

1) The root cause for this bug is premultiplication. If that is reverted and gradients are calculated in non-premultiplied space, this bug's issue goes away. The stop optimization also found above has no negative effect on the rendering of the checkerboard if premultiplied color space is no longer used.
2) With the code mentioned in bug 1241717 comment 10 applied on top of that (with an update for interpolation hinting), gradients to and from transparent are as-desired, removing the need for premultiplication.

That would solve both this bug and bug 1241717 in one go.
Assignee: milan → nobody
Flags: needinfo?(howareyou322)
Version: Trunk → 36 Branch
FTR, this is still an issue in Firefox 52.0a1 20161028030204
Disappointing to see no movement here on what is a clear and very visual bug in Firefox that impacts web design.
Although I understand that you may want to hold off on the underlying bug if the W3C insists on keeping the spec "pre-multiplied" for no good reason but pressure from Chrome folks, but at the very least try to fix this one, then?
Ryan, can you test this case against the WR solution?
Flags: needinfo?(rhunt)
Flags: needinfo?(jmuizelaar)
Flags: needinfo?(howareyou322)
Attached image checkerboard.png
I've attached the output of running WR with graphics head + some patches I am working on. The color issue is resolved, but there is a positioning issue.

It might be related to gradients or background positioning. I'll investigate it more.
Flags: needinfo?(rhunt)
[Tracking Requested - why for this release]:
This still affects any and all Firefox releases since the bug was opened.

This no longer reproduces on 77.0a1 (2020-04-28) (64-bit)
The test file renders the checkerboard as-intended.

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

Attachment

General

Creator:
Created:
Updated:
Size: