Issue metadata
Sign in to add a comment
|
Large background positions cause rendering errors
Reported by
jamunn...@netflix.com,
Mar 8 2016
|
||||||||||||||||||||||
Issue descriptionUserAgent: 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.
,
Mar 8 2016
,
Mar 11 2016
,
Mar 12 2016
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
,
Mar 12 2016
I won't be getting to this stuff anytime soon.
,
Mar 12 2016
FYI the large background sizes are the best way to illustrate the problem but the bug is present with all background size values
,
Mar 12 2016
Sorry I mean "background-position" instead of background size.
,
Mar 14 2016
I'll at least try to figure out what's happening since I'm in this code right now.
,
Mar 15 2016
Thanks, schenney!!
,
Mar 18 2016
,
Mar 18 2016
The attached file demonstrates the problem without window resize.
,
Mar 29 2016
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.
,
Mar 29 2016
,
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
,
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
,
Apr 4 2016
Fixed? :)
,
Apr 19 2016
Why yes, I think it is fixed. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by dglazkov@chromium.org
, Mar 8 2016