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

NEW
Unassigned

Status

()

Core
Layout: View Rendering
P3
normal
2 years ago
a year ago

People

(Reporter: bugger, Unassigned)

Tracking

({testcase})

49 Branch
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 2 obsolete attachments)

(Reporter)

Description

2 years ago
Created attachment 8810273 [details]
Case-1.png

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

Updated

2 years ago
Component: Untriaged → Layout
Product: Firefox → Core
(Reporter)

Comment 2

2 years ago
Created attachment 8810420 [details]
case1.html

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

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

Updated

2 years ago
Keywords: testcase-wanted → testcase
(Reporter)

Comment 3

2 years ago
Comment on attachment 8810420 [details]
case1.html

><!DOCTYPE html>
>
><html>
>
><head>
>
>	<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;
>	}
>button{
>	position: absolute;
>	top: 1em;
>	left: 1em;
>	}
>	</style>
>
></head>
>
><body>
>
>	<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>
>
></body>
>
></html>
(Reporter)

Comment 4

2 years ago
Created attachment 8810423 [details]
case1.html

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]
ff49-ie11.png
Flags: needinfo?(bugger)
(Reporter)

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?
(Reporter)

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.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
See Also: → bug 1314319
Created attachment 8813312 [details]
testcase

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

a year 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

a year ago
Created attachment 8849535 [details]
nightly devtools image preview

Same problem again with the image preview from the devtools' inspector, although more subtle.
You need to log in before you can comment on or make changes to this bug.