A combination of border-radius, border and box-sizing cause background images to not be centered correctly
Reported by
m...@mjkstudios.com,
Jan 4
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36 Example URL: http://jsfiddle.net/rzow06v3/ Steps to reproduce the problem: 1. Open JS Fiddle provided 2. Observe the last span with class "image-not-centered" within the preview window What is the expected behavior? Background image is centered regardless of whether border-radius is provided or not. What went wrong? Adding border-radius causes the center alignment of the background image to be off. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 71.0.3578.98 Channel: stable OS Version: OS X 10.12.6 Flash Version: I am a developer, but the options to log a bug didn't seem valid for this (API, JavaScript, Dev Tools). I have verified that this works as expected in Safari and Firefox on Mac OS X.
,
Jan 7
As per comment #0, Able to reproduce the issue on reported chrome 71.0.3578.98 and latest chrome 73.0.3664.0 using Mac 10.14.0 and issue not seen on M-60. Hence, marking it as Untriaged. Will provide bisect info and other OS behavior soon. Thanks..!
,
Jan 7
,
Jan 7
,
Jan 8
Able to reproduce the issue on chrome version 71.0.3578.98 and latest chrome 73.0.3664.0 using Windows 10, Mac 10.14.0, Ubuntu 17.10. Below is the bisect information for same. Bisect Info: ================ Good build: 69.0.3476.0 Bad build: 69.0.3477.0 CHANGELOG URL:You are probably looking for a change made after 571504 (known good), but no later than 571505 (first known bad). https://chromium.googlesource.com/chromium/src/+log/8117ad42726252bd38e4f4908f9e15daa0b4c831..ae49f5caf2943049acab4abe802e82c8dc001184 Suspect: https://chromium.googlesource.com/chromium/src/+/ae49f5caf2943049acab4abe802e82c8dc001184 Reviewed-on: https://chromium-review.googlesource.com/1112563 Thanks..!
,
Jan 9
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105 commit 70e7e5ac77bef3aab6c88d8d1caf568b49ffe105 Author: Stephen Chenney <schenney@chromium.org> Date: Wed Jan 09 23:05:48 2019 Fix background centering with border radius Optimized background painting uses the border clip rect when there are rounded corner, but this rect is not the inner border rect when we are doing bleed avoidance. In such cases anything relying on background position will paint the image in the wrong place (offset by half the border thickness). This patch disables optimized backgrounds when employing bleed avoidance by dest rect shrinkage. It also enables the optimization when there are no images and adds a TODO regarding dest rect adjustemnt in the no-repeat background case. Bug: 919197 Change-Id: I5b9f4f512bc52a33d0b74d25e3f015e5dd8ff58c Reviewed-on: https://chromium-review.googlesource.com/c/1403614 Commit-Queue: Stephen Chenney <schenney@chromium.org> Reviewed-by: Florin Malita <fmalita@chromium.org> Cr-Commit-Position: refs/heads/master@{#621356} [modify] https://crrev.com/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105/third_party/blink/renderer/core/paint/background_image_geometry.cc [modify] https://crrev.com/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105/third_party/blink/renderer/core/paint/box_painter_base.cc [add] https://crrev.com/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105/third_party/blink/web_tests/external/wpt/css/css-backgrounds/background-image-centered-with-border-radius.html [add] https://crrev.com/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105/third_party/blink/web_tests/external/wpt/css/css-backgrounds/reference/background-image-centered-with-border-radius-ref.html [add] https://crrev.com/70e7e5ac77bef3aab6c88d8d1caf568b49ffe105/third_party/blink/web_tests/external/wpt/css/css-backgrounds/support/green-60x60-red-5px-border.png
,
Yesterday
(35 hours ago)
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by phanindra.mandapaka@chromium.org
, Jan 5