New issue
Advanced search Search tips
Starred by 11 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 17
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment
link

Issue 898950: Two linear-gradient backgrounds cause rendering artefacts

Reported by craig.fr...@gmail.com, Oct 25

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

Steps to reproduce the problem:
1. Open the attached HTML file.
2. Notice the vertical lines that appear between some links.

What is the expected behavior?

What went wrong?
N/A

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 70.0.3538.77  Channel: stable
OS Version: OS X 10.13.6
Flash Version:
 
index.html
1.0 KB View Download
2018-10-25 17-22-13.png
107 KB View Download

Comment 1 by a...@chromium.org, Oct 25

Components: Blink>CSS Blink
Labels: Needs-Triage-M70

Comment 3 by susan.boorgula@chromium.org, Oct 26

Cc: susan.boorgula@chromium.org
Labels: -Type-Bug -Pri-2 Triaged-ET Target-70 Target-71 Target-72 RegressedIn-69 M-72 FoundIn-71 FoundIn-70 FoundIn-72 hasbisect OS-Linux OS-Windows Pri-1 Type-Bug-Regression
Owner: schenney@chromium.org
Status: Assigned (was: Unconfirmed)
craig.francis@ Thanks for the issue.

Able to reproduce this issue on Windows 10, Mac OS 10.13.3 and Ubuntu 17.10 on the reported version 70.0.3538.77 and latest Canary 72.0.3591.0.

Bisect Information:
===================
Good Build: 69.0.3476.0
Bad Build : 69.0.3477.0

By running per-revision script 'No enough builds error' was coming up, hence below is the ChangeLog URL by running the Chromium bisect.
https://chromium.googlesource.com/chromium/src/+log/7a73f750e5926164aa3ecf077ca5aab8c4eeb28e..6e617e7fd9479367c5d0f50018767a71b7022587

From the above Changelog, suspecting the below change:
Reviewed-on: https://chromium-review.googlesource.com/1112563

schenney@ Please check and confirm if this issue is related to your change, else help us in assigning to the right owner.

Thanks..

Comment 4 by chrishtr@chromium.org, Oct 26

Components: -Blink>CSS -Blink Blink>Paint

Comment 5 by sdemo...@gmail.com, Oct 26

Also faced with this problem. It affects background-image rendering canvas if element's with fractional element size (i.e. 10.7px; ). Tho, it does not affects background-color rendering.

Also element with fractional size will not cause overflow on parent element.

Did a pen to better describe it.

https://codepen.io/SDemonUA/pen/RevpGW

Comment 6 by schenney@chromium.org, Nov 5

Labels: -Pri-1 -Target-70 Pri-2

Comment 7 by real...@gmail.com, Nov 9

background-repeat: no-repeat as a workaround:

https://codepen.io/anon/pen/aQZbVN
GIF.gif
53.0 KB View Download

Comment 8 by craig.fr...@gmail.com, Nov 9

Thanks for the `background-repeat: no-repeat` workaround... am curious how that works.

Comment 9 by schenney@chromium.org, Dec 6

Status: Started (was: Assigned)
I think this is a duplicate but I won't mark as such until I confirm that fixing one fixes the other.

Comment 11 by bugdroid1@chromium.org, Dec 15

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2eed6201bd9ed2c65c7910402d32c036db257fb6

commit 2eed6201bd9ed2c65c7910402d32c036db257fb6
Author: Stephen Chenney <schenney@chromium.org>
Date: Sat Dec 15 04:08:07 2018

Fix gradient background sizing

This is a hard-to-fix situation. We size generated background images
according to the tile size, which is a snapped rectangle sized according
to the destination values, in general. But then we compute a src rect
for image drawing using the unsnapped values, because that is best for
bitmap images where we want to pull out the most accurate src rect
possible. However, that source rect ends up larger than the tile size
due to rounding without the original offset in the layer (because now
we are working in image space).

The gradient painting code then sees that it has a src rect that is
larger than the tile size and hence the gradient image size. The code
thinks that we want to have some more pixels than the gradient
provides, which is true in some cases, and scales things to get those
extra pixels in the painted output. Hence empty pixels on the screen
when we really want the gradient to be filling the dest rect.

Changing the gradient painting code will break valid use cases. Changing
the tile size breaks things in a different way and doesn't really fix
the problem. So change the src rect computation to use snapped sizes
for generated content in an attempt to get a src that matches the tile
size.

R=fmalita@chromium.org

Bug:  898950 
Change-Id: I100575ad4f4fa3004fbc232a72c90b0032ccef4e
Reviewed-on: https://chromium-review.googlesource.com/c/1376814
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Florin Malita <fmalita@chromium.org>
Cr-Commit-Position: refs/heads/master@{#616944}
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/renderer/core/paint/box_painter_base.cc
[add] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/external/wpt/css/css-backgrounds/background-gradient-subpixel-fills-area.html
[add] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/external/wpt/css/css-backgrounds/reference/background-gradient-subpixel-fills-area-ref.html
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/mac-mac10.10/fast/forms/select/listbox-appearance-basic-expected.png
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/mac-mac10.11/fast/forms/select/listbox-appearance-basic-expected.png
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/mac-mac10.12/fast/forms/select/listbox-appearance-basic-expected.png
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/mac/fast/forms/select/listbox-appearance-basic-expected.png
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/mac/svg/zoom/page/zoom-background-images-expected.png
[modify] https://crrev.com/2eed6201bd9ed2c65c7910402d32c036db257fb6/third_party/blink/web_tests/platform/win/svg/zoom/page/zoom-background-images-expected.png

Comment 12 by schenney@chromium.org, Dec 17

Cc: schenney@chromium.org
 Issue 899515  has been merged into this issue.

Comment 13 by schenney@chromium.org, Dec 17

 Issue 897441  has been merged into this issue.

Comment 14 by schenney@chromium.org, Dec 17

Status: Fixed (was: Started)

Comment 15 by schenney@chromium.org, Dec 31

Cc: swarnasree.mukkala@chromium.org
 Issue 918168  has been merged into this issue.

Comment 16 by schenney@chromium.org, Jan 14

Cc: phanindra.mandapaka@chromium.org vamshi.kommuri@chromium.org
 Issue 920786  has been merged into this issue.

Comment 17 by schenney@chromium.org, Jan 29

 Issue 925785  has been merged into this issue.

Sign in to add a comment