Open Bug 1317193 Opened 8 years ago Updated 2 years ago

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

Categories

(Core :: Web Painting, defect, P3)

Product:
Core
Component:
Web Painting
Version:
49 Branch
Type:
defect

Tracking

()

People

(Reporter: bugger, Unassigned)

References

Details

(Keywords: testcase)

Attachments

(5 files, 2 obsolete files)

Case-1.png
2.23 KB, image/png
Details
ff49-ie11.png
40.78 KB, image/png
Details
testcase
721 bytes, text/html
Details
ff52 google image checkboard
116.46 KB, image/jpeg
Details
nightly devtools image preview
49.26 KB, image/jpeg
Details
Attached image 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.
Can you attach a testcase (html file) to the bug report, please.
Flags: needinfo?(bugger)
Keywords: testcase-wanted
Component: Untriaged → Layout
Product: Firefox → Core
Attached file case1.html (obsolete) — 
Ok test html added, that reproduces case 1 for me.

Case 2 is visible on the lea.verou site linked above, after resizing it.
Keywords: testcase-wanted → testcase
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>
Attached file case1.html (obsolete) — 
fixed :) >> document.createElement('div')
Attachment #8810420 - Attachment is obsolete: true
I see the white straight line with IE11 too.
Attached image ff49-ie11.png — 
Flags: needinfo?(bugger)

    
    

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

    
    

    
  
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:  → 1314319

    
    

    
  

      
      
      
      

        Attached file
          
        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

    
    

    
  


  
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.

    
    

    
  


  
Same problem again with the image preview from the devtools' inspector, although more subtle.
Component: Layout: View Rendering → Layout: Web Painting

    
  
Severity: normal → S3

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: