New issue
Advanced search Search tips

Issue 676007 link

Starred by 1 user

Issue metadata

Status: Archived
Owner: ----
Closed: Aug 21
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Using repeating linear gradients on a progress bar causes jagged edges

Reported by jwaffles...@gmail.com, Dec 20 2016

Issue description

Chrome Version       : 55.0.2883.87 (Official Build) m (32-bit)
URLs (if applicable) : N/A
Other browsers tested: 
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: N/A
    Firefox: 50.1.0 OK
         IE: N/A

What steps will reproduce the problem?
(1) Using repeating linear gradients on a progress bar:
(2) Here's a part of the CSS:
progress::-webkit-progress-value{
  background-color: yellow;
  background-size: 30px 30px;
  background-image: linear-gradient(135deg, rgba(0, 0, 0, .15) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .15) 75%, transparent 75%, transparent);
}

What is the expected result?
A 'candystripe' effect, with smooth edges along each stripe.

What happens instead?
A 'candystripe' effect, but the edges along each stripe are jagged.

Please provide any additional information below. Attach a screenshot if
possible.

Here is a JSFiddle with the code used. Run in Chrome to see the problem:
https://jsfiddle.net/tout8ajw/
 
Now tested on Microsoft Edge 38.14393.0.0 - it works OK there.

Comment 2 by ajha@chromium.org, Dec 21 2016

Labels: M-55 prestable-55.0.2883.87
Cc: kkaluri@chromium.org
Labels: Needs-Feedback
jwafflesgaming38@ With provided jsfiddle in comment #0, i have got two different images in chrome and firefox/IE.

Attaching a screenshot for your reference, could you please look into it and let us know the expected behavior for provided jsfiddle.


Issue 676007.png
18.7 KB View Download
Sorry, maybe I didn't make it clear enough. The code I pasted only works in Chrome. Here's a version that works in both Firefox and Chrome and IE, and produces the same result.

Also attached is a screenshot of what it looks like for me.

First screenshot - Chrome, 2nd, Firefox, 3rd, IE.

+kkaluri@chromium.org
Capture.PNG
4.0 KB View Download
Capture2.PNG
1.9 KB View Download
Capture3.PNG
1.9 KB View Download
Whoops, forgot to give jsfiddle link:

https://jsfiddle.net/tout8ajw/1/
Project Member

Comment 6 by sheriffbot@chromium.org, Dec 28 2016

Labels: -Needs-Feedback Needs-Review
Owner: kkaluri@chromium.org
Thank you for providing more feedback. Adding requester "kkaluri@chromium.org" for another review and adding "Needs-Review" label for tracking.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Components: UI
Labels: -M-55 -Needs-Review M-57 OS-Linux OS-Mac OS-Windows
Owner: ----
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue in windows 10, Ubuntu 14.04 and mac 10.12.2 with chrome version M55-55.0.2883.87 and in earlier version of chrome M30-30.0.1549.0.
This is a non-regression issue and marking it as untriaged.

Please look into the attached screen-cast.
Issue 676007.mp4
353 KB View Download
Status: Archived (was: Untriaged)
Archiving old bugs that haven't been actively assigned in over a year.

If you feel this issue should still be addressed, feel free to reopen it or to file a new issue. Thanks!

Archiving old bugs that haven't been actively assigned in over a year.

If you feel this issue should still be addressed, feel free to reopen it or to file a new issue. Thanks!
Archiving old bugs that haven't been actively assigned in over a year.

If you feel this issue should still be addressed, feel free to reopen it or to file a new issue. Thanks!

Sign in to add a comment