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

Issue 593079 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Closed: Apr 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Large background positions cause rendering errors

Reported by jamunn...@netflix.com, Mar 8 2016

Issue description

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

Example URL:
http://codepen.io/anon/pen/ZWWGrm?editors=1100

Steps to reproduce the problem:
1.  Open this example page: http://codepen.io/anon/pen/ZWWGrm?editors=1100
2.  Resize browser and note background image jumps around
3.  Reduce value of background-position, resize and notice that image jumps around less

What is the expected behavior?
background image should stay stationary when resizing the browser. This works properly in Chrome 48 as well as Firefox, Safari, and Edge.

What went wrong?
background image jumps around when resizing the browser.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes Chrome 48

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.75  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 20.0 r0

This will cause breakage in responsive spritesheets.
 
Components: -Blink Blink>Paint
I believe this is paint?
Status: Untriaged (was: Unconfirmed)
Labels: Needs-Bisect M-48
Cc: pbomm...@chromium.org
Components: -Blink>Paint Blink>Layout
Labels: -M-48 -Type-Bug -Pri-2 -Needs-Bisect M-49 OS-Windows Pri-1 Type-Bug-Regression
Owner: le...@chromium.org
Status: Assigned (was: Untriaged)
Able to reproduce the issue on Windows, Mac, below are bisect results :

Last good build : 49.0.2585.0
First Bad build : 49.0.2586.0

Bisect Result :
You are probably looking for a change made after 363785 (known good), but no lat
er than 363812 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/42290cb91a66566637a1715737b1961a8480b934..b5daa8ef58d6f02e446ad19cc44dc2c0d192db98

Suspecting CL : https://chromium.googlesource.com/chromium/src/+/9c60333a01e2cad5fa21318c39c8a330244b3d56

Comment 5 by le...@chromium.org, Mar 12 2016

Cc: le...@chromium.org schenney@chromium.org
Owner: ----
Status: Available (was: Assigned)
I won't be getting to this stuff anytime soon.
FYI the large background sizes are the best way to illustrate the problem but the bug is present with all background size values
Sorry I mean "background-position" instead of background size.
Owner: schenney@chromium.org
Status: Assigned (was: Available)
I'll at least try to figure out what's happening since I'm in this code right now.

Comment 9 by le...@chromium.org, Mar 15 2016

Thanks, schenney!!
Status: Started (was: Assigned)
The attached file demonstrates the problem without window resize.
background-large-position-and-size-remains-stable.html
1.7 KB View Download
Labels: -M-49
I have a fix for background-repeat: repeat, but I suspect we'll also need something for round and space. And we need some serious code cleanup now. It's getting unmanageable.
Labels: -Pri-1 Pri-2
Project Member

Comment 14 by bugdroid1@chromium.org, Apr 1 2016

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

commit 41f3d062c90c1a5d67228e6e061c7e35fd4d62fd
Author: schenney <schenney@chromium.org>
Date: Fri Apr 01 22:20:57 2016

Fix for phase in background tiling.

When computing the phase for background image tiling using snapped
coordinates, we get very incorrect results, and unstable results,
when the background-position is large (because the division of
the position by the tile width magnifies the rounding artifacts).
This patch changes the phase calculation to compute the phase using
unsnapped values then re-apply the fractional component to the
snapped values. This results in stable, near-pixel perfect results.
Given very large background-positions, we can't do much better.
There's a new test and some results changed by a pixel or so.

There is some code refactoring to reduce what is becoming a very
unwieldy method. Sorry that makes it harder to review.

R=leviw@chromium.org
BUG= 593079 

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

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

[modify] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable.html
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/css3/background/resources/red-green-red-vertical.png
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/css3/background/resources/red-green-red.png
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/css3/background/resources/red-red-green-vertical.png
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/css3/background/resources/red-red-green.png
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/platform/linux/css3/background/background-large-position-and-size-remains-stable-expected.png
[add] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/LayoutTests/platform/linux/css3/background/background-large-position-and-size-remains-stable-expected.txt
[modify] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/Source/core/paint/BackgroundImageGeometry.cpp
[modify] https://crrev.com/41f3d062c90c1a5d67228e6e061c7e35fd4d62fd/third_party/WebKit/Source/core/paint/BackgroundImageGeometry.h

Project Member

Comment 15 by bugdroid1@chromium.org, Apr 2 2016

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

commit 75a1fce006af0649210716da9c1ed05f6f377a0d
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Sat Apr 02 00:41:42 2016

Auto-rebaseline for r384706

https://chromium.googlesource.com/chromium/src/+/41f3d062c

BUG= 593079 
TBR=schenney@chromium.org

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

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

[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/css3/background/background-large-position-and-size-remains-stable-expected.png
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/fast/backgrounds/size/backgroundSize12-expected.png
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/fast/backgrounds/size/backgroundSize18-expected.png
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/fast/backgrounds/size/backgroundSize19-expected.png
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/fast/backgrounds/size/backgroundSize21-expected.png
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/fast/backgrounds/size/backgroundSize22-expected.png
[add] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/platform/mac/css3/background/background-large-position-and-size-remains-stable-expected.txt
[add] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/platform/win/css3/background/background-large-position-and-size-remains-stable-expected.txt
[modify] https://crrev.com/75a1fce006af0649210716da9c1ed05f6f377a0d/third_party/WebKit/LayoutTests/platform/win/fast/inline/inline-box-background-repeat-x-expected.png

Fixed? :)
Status: Fixed (was: Started)
Why yes, I think it is fixed.

Sign in to add a comment