tiles of a CSS linear-gradient background have antialiasing inconsistent with each other




2 years ago
6 months ago


(Reporter: bugger, Unassigned)



49 Branch

Firefox Tracking Flags

(Not tracked)



(5 attachments, 2 obsolete attachments)



2 years ago
Created attachment 8810273 [details]

User Agent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20161031074316

Steps to reproduce:

Case 1. Created a div with a gradient created checkerboard pattern background (similar to http://lea.verou.me/css3patterns/#checkerboard) to load on screen with javascript.

Case 2. Loaded full body background image gradient created checkerboard pattern, re-sized window.

Actual results:

Case 1. The 2 black triangles that should join together into a black rectangle, on some occasions does not join together, leaving a pixel wide line of background color in between. See attached file.

Case 2. It displays correctly initial, but a pixel dot in the center from the background color goes thru after resizing the window sometimes, on some checkerboard squares.

Expected results:

Consistent checkerboard pattern.

Comment 1

2 years ago
Can you attach a testcase (html file) to the bug report, please.
Flags: needinfo?(bugger)
Keywords: testcase-wanted


2 years ago
Component: Untriaged → Layout
Product: Firefox → Core

Comment 2

2 years ago
Created attachment 8810420 [details]

Ok test html added, that reproduces case 1 for me.

Case 2 is visible on the lea.verou site linked above, after resizing it.


2 years ago
Keywords: testcase-wanted → testcase

Comment 3

2 years ago
Comment on attachment 8810420 [details]

><!DOCTYPE html>
>	<meta charset="UTF-8" />
>	<meta name="robots" content="noindex" />
>	<title>Case 1</title>
>	<style type="text/css">
>body {
>	background: #999;
>	font-size:4.22em;
>	}
>#square {
>	position: absolute;
>	top: 15%;
>	left: 15%;
>	height: 4em;
>	width: 4em;
>	background-color: rgb(255,255,255);
>	background-image:
>		repeating-linear-gradient(45deg,rgb(0,0,0) 25%,transparent 25%,transparent 75%,rgb(0,0,0) 75%,rgb(0,0,0)),
>		repeating-linear-gradient(45deg,rgb(0,0,0) 25%,transparent 25%,transparent 75%,rgb(0,0,0) 75%,rgb(0,0,0));
>	background-size: 0.82em 0.82em;
>	background-position: 0 0, 0.41em 0.41em;
>	}
>	position: absolute;
>	top: 1em;
>	left: 1em;
>	}
>	</style>
>	<button type="button" onclick="loadSquare()">Test</button>
>	<script type="text/javascript">
>function loadSquare(){
>	var square = document.createElement('div');
>	square.setAttribute('id', 'square');
>	document.body.appendChild(square);
>	</script>

Comment 4

2 years ago
Created attachment 8810423 [details]

fixed :) >> document.createElement('div')
Attachment #8810420 - Attachment is obsolete: true

Comment 5

2 years ago
I see the white straight line with IE11 too.

Comment 6

2 years ago
Created attachment 8810472 [details]
Flags: needinfo?(bugger)

Comment 7

2 years ago
(In reply to Loic from comment #5)
> I see the white straight line with IE11 too.

Same thing? well, regardless, if background-position is set to half the background-size for the triangles, they should join together with no line in between, should they not?

Comment 8

2 years ago
Doing some research:

The w3c draft https://drafts.csswg.org/css-images-3/#typedef-color-stop-list say:

"If multiple color stops have the same position, they produce an infinitesimal transition from the one specified first in the rule to the one specified last. In effect, the color suddenly changes at that position rather than smoothly transitioning."

So in the example when "rgb(0,0,0) 25%, transparent 25%" there should be a sudden change rather than a transition, and thus no white line, as I understand it. From looking at the screenshots by Loic I assume the white line is a small transition?

But if I can see it it is not infinitesimal, if counting pixels.
Ever confirmed: true
Priority: -- → P3
See Also: → bug 1314319
Created attachment 8813312 [details]

This is the same, but with the unnecessary button and script removed, and with a bit of whitespace cleanup of the markup.
Attachment #8810423 - Attachment is obsolete: true
Component: Layout → Layout: View Rendering
Summary: CSS linear-gradient displays inconsistent → tiles of a CSS linear-gradient background have antialiasing inconsistent with each other

Comment 10

2 years ago
Created attachment 8849504 [details]
ff52 google image checkboard

I have the same visual artifacts with the checkerboard Google Image uses for transparent PNG.

Interestingly, rendering is ok with hardware acceleration disabled.
(about:config -> layers.acceleration.disabled = true)

Firefox 52.0.1 x64 on Windows 7, using quite old nVidia drivers but not blacklisted.

Comment 11

2 years ago
Created attachment 8849535 [details]
nightly devtools image preview

Same problem again with the image preview from the devtools' inspector, although more subtle.


6 months ago
Component: Layout: View Rendering → Layout: Web Painting
Product: Core → Core
You need to log in before you can comment on or make changes to this bug.