background-position off by one pixel.
Reported by
moim...@gmail.com,
Aug 19 2016
|
|||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0
Example URL:
Steps to reproduce the problem:
I did a filling animation for hr tag, and while it work well on Firefox, it seems to have an issue on Chrome.
I have this code :
JSX :
<hr className={styles.line} />
CSS :
.line {
width: 20%;
margin-left: 0;
height: 3px;
border: none;
background: linear-gradient(to left, #C0C4CB 50%, black 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.3s linear;
}
.titleHover .line {
background-position: left bottom;
}
What is the expected behavior?
The hr tag should transition from grey color to black color with a filling animnation.
What went wrong?
It does that but with one exception, it seems that the background positioning is off by one pixel.
See attached image that describe the issue.
Does it occur on multiple sites: N/A
Is it a problem with a plugin? N/A
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 52.0.2743.116 Channel: stable
OS Version: Fedora 24
Flash Version: Shockwave Flash 11.2 r202
,
Aug 23 2016
Created reduced test case without animations. https://jsfiddle.net/fu5ak58h/ Seems to be a pixel snapping inconsistency, not sure if layout or paint.
,
Oct 11 2016
Hi, I am interested with this issues. BTW, this works well on 47.0.2526.106/Ubuntu 1404. Chromium 47.0.2526.106 (Developer Build) Ubuntu 14.04 (64-bit) Revision d054162703753b78f78fded36b3e0d218b2a7fee OS Linux Blink 537.36 (@d054162703753b78f78fded36b3e0d218b2a7fee) JavaScript V8 4.7.80.25 Flash (Disabled) User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/47.0.2526.106 Chrome/47.0.2526.106 Safari/537.36
,
Oct 11 2016
Chromium 47 is quite old. Does it work using the latest Chromium? I can definitely reproduce it (comment 2) using Chrome 53.
,
Oct 12 2016
It can be reproduced with 53.0.2785.143 (Official Build)/Win8.1 and 56.0.2887.0 (Developer Build) (64-bit)/Ubuntu 64. And if you zoom this 150%, the red part will shift to containerB. Test case onepixel639228.html is from https://jsfiddle.net/fu5ak58h/
,
Oct 12 2016
,
Mar 31 2017
The gradient needs to use the snapped size (rather than the actual size) of the container. Who owns gradients? The paint team?
,
Mar 31 2017
Indeed we do.
,
Apr 4 2017
Not a regression if it happened more than 3 stable releases ago. It almost certainly regressed back when we tried to fix all the background sub-pixel positioning issues. This is another in that broad class of problems. On my M58 linux, for instance, I see red in both cases without zooming, which may be due to a more recent fix to "background-position: right" This is slightly different, however, in that it is not an image and we should be able to do better for the gradients.
,
Apr 4 2017
,
Apr 12 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 12 2018
Not sure why I didn't already own this. |
|||||||||||||||
►
Sign in to add a comment |
|||||||||||||||
Comment 1 by nyerramilli@chromium.org
, Aug 22 2016