1314319 - tiled repeating-linear-gradient that should be 2px of red every tile sometimes only starts with 1px of red

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[mmalerba]

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

Steps to reproduce:

Created a repeating-linear-gradient background with a background-size (see jsfiddle: https://jsfiddle.net/qwLr34dy/).

Firefox 49.0.2 on Ubuntu 14.04 LTS


Actual results:

The "to right" (90deg) case doesn't render smoothly. 


Expected results:

Should have rendered smoothly like "to left", "to top", and "to bottom"

Comment 1

[Loic]

Can you attach a screenshot of the rendering on your machine (and if possible a screenshot with good rendering)?

Comment 2

[mmalerba]

Attachment: bad rendering (firefox)

Comment 3

[mmalerba]

Attachment: good rendering (chrome)

Comment 4

[mmalerba]

Done, these screenshots are from my Mac which shows same behavior as Ubuntu.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I don't understand the Chrome rendering, which appears to have consistent 2px red stripes and consistent 3px width white stripes.  Yet the specified size gives tiles of a gradient that are supposed to be 5.6px per tile (5% of 112px), of which the first 2px should be red and the remaining 3.6px should be white.

It does seem odd that (in the screenshot -- I don't see this) a few of the tiles in Firefox, in the "to right" variant only, end up being a single pixel wide rather than two, though.

For the first set, the fact that the gradient is repeating shouldn't really make a difference (although it might), since the gradient has a stop at both 0% and 100%, and the gradient line is parallel to the edge of the tile.  It would be interesting (for somebody who sees the bug in the original testcase, which I don't) to see whether the bug also occurs with linear-gradient() rather than repeating-linear-gradient().

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to David Baron :dbaron: ⌚️UTC-8 from comment #6)
> For the first set, the fact that the gradient is repeating shouldn't really
> make a difference (although it might), since the gradient has a stop at both
> 0% and 100%, and the gradient line is parallel to the edge of the tile.  It

Actually, this is true for both sets, given the gradient line determination in https://drafts.csswg.org/css-images/#ref-for-starting-point-1