New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 622294 link

Starred by 2 users
Status: Fixed
Owner:
schenney@chromium.org
Closed: Jul 2016
Cc:
nyerramilli@chromium.org
schenney@chromium.org
█ tkonch...@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Space between linear gradient and colored background after linear transition of background-position

Reported by max.she...@gmail.com, Jun 22 2016 
UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2774.2 Safari/537.36

Example URL:
http://getbootstrap.com/2.3.2/components.html#buttonDropdowns

Steps to reproduce the problem:
1. Create HTML element with linear gradient and colored backgrounds and linear transition of background-position (final gradient color should be the same as background-color).
2. Trigger action for transition.

What is the expected behavior?

What went wrong?
Sometimes there's a space between final gradient color and background color.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? No Opera 38.0.2220.31, Google Chrome 51.0.2704.103 m

Chrome version: 53.0.2774.2  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 22.0 r0
button.jpg
3.3 KB View Download

Comment 1 by pdr@chromium.org, Jun 23 2016

Components: -Blink Blink>Paint
Labels: -OS-Windows -Type-Bug Needs-Bisect OS-All Type-Bug-Regression
Status: Available (was: Unconfirmed)
Thanks for filing. I saw the same bug on one of our internal sites yesterday and thought it was a UI effect!

@bisecters, can you please bisect using these instructions:
1) Open http://getbootstrap.com/2.3.2/components.html#buttonDropdowns
2) Mouse over the blue button and notice that light blue lines that appear. Light blue lines should not appear.

Comment 2 by ssamanoori@chromium.org, Jun 24 2016

Labels: Needs-Feedback
Unable to reproduce the issue on Windows 7, Mac 10.11.5, Ubuntu 14.04 using 53.0.2774.2, latest canary 53.0.2777.0 as per steps in comment #1.Not observed any light blue lines when mouse hovered the blue button.

Please find attached screencast.

pdr@Could you please check the attached screencast and suggest if anything missed in triaging the issue.
622294.mp4
723 KB View Download

Comment 3 by max.she...@gmail.com, Jun 24 2016 

According to my observations, this bug doesn't occur regularly, and this may dpend on processor/memory load.

Comment 4 by pdr@chromium.org, Jun 24 2016

Labels: -Needs-Feedback -Needs-Bisect
Owner: schenney@chromium.org
Status: Assigned (was: Available)
Thanks for trying ssamanoori. I manually bisected this:
/mc_hot_dog/ssd/chromium/src $ ./tools/bisect-builds.py -a linux64 -g 300000 http://getbootstrap.com/2.3.2/components.html#buttonDropdowns
Bisecting range [300003 (good), 401886 (bad)].
...
You are probably looking for a change made after 380968 (known good), but no later than 380975 (first known bad).
CHANGELOG URL:
https://chromium.googlesource.com/chromium/src/+log/3e7a9545bff26c2aa07ccf651f7dd9f353c9bdc9..b0805c1b8e7d0af2f12a036225f1b29a4ab4b8d8

I think this is https://chromium.googlesource.com/chromium/src/+/a75de675cbb8f9f594fabc68236a4547975ad7fe

Comment 5 by schenney@chromium.org, Jun 24 2016 

Reliably reproduces with 120% zoom, as is typical for these pixel snapping issues. At 110% I also see a transient line for some particular animation value. I'll try to reduce it.

Comment 6 by schenney@chromium.org, Jun 27 2016 

Reduced test case.
background-color-gradient-alignment.html
410 bytes View Download

Comment 7 by schenney@chromium.org, Jun 27 2016 

Even though the gradient image is no-repeat in y, we're asking for an image that is somehow 1 larger than the intrinsic size, and we're repeating within that slightly large image. Hence 1 row of the gradient start color appearing. Now on to fixing it.

Comment 8 by schenney@chromium.org, Jun 28 2016 

More thorough test case.
background-color-gradient-alignment.html
842 bytes View Download
Project Member

Comment 9 by bugdroid1@chromium.org, Jul 1 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/689f41251eab6e3812c09296a14cb1edc6db3b0e

commit 689f41251eab6e3812c09296a14cb1edc6db3b0e
Author: schenney <schenney@chromium.org>
Date: Fri Jul 01 15:34:04 2016

Fix rounding of phase for background image

In the BackgroundImageGeometry::calculate methods we were previously
computing the full image tiling phase value and then rounding to int
at the end. But frequently the phase is computed as the negative of a
background-position value, which is itself frequently negative. The
result of negating a value then rounding is not the same as rounding
then negating, and this difference matters when trying to, for
instance, match the end of a linear gradient with a solid background
color.

This patch changes phase rounding to round before negating. The test
case is fixed, and no other test results change.

R=pdr@chromium.org,fmalita@chromium.org
BUG= 622294 

Review-Url: https://codereview.chromium.org/2103563002
Cr-Commit-Position: refs/heads/master@{#403458}

[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/css3/background/background-color-gradient-alignment.html
[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/fast/backgrounds/background-with-sub-pixel-offset-positioning.html
[add] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/platform/linux/css3/background/background-color-gradient-alignment-expected.png
[add] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/platform/linux/css3/background/background-color-gradient-alignment-expected.txt
[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/platform/linux/fast/images/color-profile-background-image-space-expected.png
[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/background-repeat-space-padding-box-expected.png
[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/Source/core/paint/BackgroundImageGeometry.cpp
[modify] https://crrev.com/689f41251eab6e3812c09296a14cb1edc6db3b0e/third_party/WebKit/Source/core/paint/BackgroundImageGeometry.h
Project Member

Comment 10 by bugdroid1@chromium.org, Jul 1 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/65b225173bb18d0863b26b69a49acafc370f6490

commit 65b225173bb18d0863b26b69a49acafc370f6490
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Fri Jul 01 17:00:08 2016

Auto-rebaseline for r403458

https://chromium.googlesource.com/chromium/src/+/689f41251

BUG= 622294 
TBR=schenney@chromium.org

Review URL: https://codereview.chromium.org/2120543002 .

Cr-Commit-Position: refs/heads/master@{#403471}

[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/css3/background/background-color-gradient-alignment-expected.png
[add] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/css3/background/background-color-gradient-alignment-expected.txt
[rename] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/android/css3/background/background-color-gradient-alignment-expected.png
[rename] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/android/css3/background/background-color-gradient-alignment-expected.txt
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu-rasterization/fast/images/color-profile-background-image-space-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/mac/fast/images/color-profile-background-image-space-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/background-repeat-space-padding-box-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/mac/virtual/gpu-rasterization/fast/images/color-profile-background-image-space-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/win/fast/images/color-profile-background-image-space-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/background-repeat-space-padding-box-expected.png
[modify] https://crrev.com/65b225173bb18d0863b26b69a49acafc370f6490/third_party/WebKit/LayoutTests/platform/win/virtual/gpu-rasterization/fast/images/color-profile-background-image-space-expected.png

Comment 11 by schenney@chromium.org, Jul 1 2016

Status: Fixed (was: Assigned)

Comment 12 by schenney@chromium.org, Jul 6 2016

Cc: nyerramilli@chromium.org tkonch...@chromium.org schenney@chromium.org
 Issue 617513  has been merged into this issue.
►

Sign in to add a comment