Bug 54347 - Angled -webkit-linear-gradient with hard edges doesn't fit to pixel grid consistently
Summary: Angled -webkit-linear-gradient with hard edges doesn't fit to pixel grid cons...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Other Linux
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2011-02-12 17:00 PST by Alex Munroe [:eevee]
Modified: 2022-10-14 06:16 PDT (History)
4 users (show)

See Also:

testcase (2.04 KB, text/html)
2011-02-12 17:00 PST, Alex Munroe [:eevee]
no flags Details
rendering in safari, firefox, chrome (944.64 KB, image/png)
2022-10-14 06:16 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Alex Munroe [:eevee] 2011-02-12 17:00:44 PST
Created attachment 82246 [details]

See attached testcase, which uses -webkit-linear-gradient and background-size to draw diagonal stripes of various sizes along a square background.  There are two similar problems here, which I assume have the same root cause.

1. When using "top left" as the anchor for the gradient, current Chromium builds sometimes draw one or two pixels the wrong color at the left edge of each gradient box, resulting in a jarring effect like this:


2. When using "-45deg", the effect is worse; at virtually any background-size, bands of the gradient fluctuate in width by a pixel or two, resulting in an odd studded appearance.  It's so bad that with a background-size of 2px, this /diagonal/ gradient renders as a pattern of /vertical/ lines.

The spec doesn't legislate precisely how to render gradients, but current Gecko draws smooth diagonal lines at any size and zoom level, which seems more correct (or at least more useful).

Both problems occur as long as two color stops collide within a pixel, even if they don't have exactly the same length.  If they're at least a pixel apart, the rendering is perfect.
Comment 1 Nicole Sullivan 2012-05-25 21:22:11 PDT
I notice this bug in Chrome Version 19.0.1084.46 but not in Firefox or Safari 5.1.7. The issue can be seen on these test pages:
- http://lea.verou.me/css3patterns/#diagonal-stripes
- http://lea.verou.me/css3patterns/#zig-zag
Comment 2 Nicole Sullivan 2012-05-25 21:55:21 PDT
Seems to be fixed in Chrome Version 21.0.1151.1 canary.
Comment 3 Karl Dubost 2022-10-14 06:16:30 PDT
Created attachment 462985 [details]
rendering in safari, firefox, chrome

Tested on macOS 13.0
A Safari                     16.1          18614.
B Safari Technology Preview  16.4          18615.1.7.1
C Firefox Nightly            107.0a1       10722.10.14
D Google Chrome Canary       108.0.5355.0  5355.0

Screenshots position.