Two linear-gradient backgrounds cause rendering artefacts
Reported by
craig.fr...@gmail.com,
Oct 25
|
||||||||
Issue descriptionUserAgent: 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:
,
Oct 26
,
Oct 26
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..
,
Oct 26
,
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
,
Nov 5
,
Nov 9
background-repeat: no-repeat as a workaround: https://codepen.io/anon/pen/aQZbVN
,
Nov 9
Thanks for the `background-repeat: no-repeat` workaround... am curious how that works.
,
Dec 6
I think this is a duplicate but I won't mark as such until I confirm that fixing one fixes the other.
,
Dec 13
,
Dec 15
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
,
Dec 17
,
Dec 17
Issue 897441 has been merged into this issue.
,
Dec 17
,
Dec 31
,
Jan 14
Issue 920786 has been merged into this issue. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by a...@chromium.org
, Oct 25