Equal fractional margin and padding don't cancel out on inline elements
Reported by
laughing...@gmail.com,
Mar 22 2017
|
||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3047.0 Safari/537.36 Steps to reproduce the problem: 1. Create an element with display inline 2. Give it a positive padding and a negative margin, both equal to a fraction of an em or ex, with that fraction not exactly representable in binary (say, padding:0.1, margin: -0.1 reproduces the bug, padding:0.5, margin:-0.5 behaves as expected) What is the expected behavior? Since the padding and margin are equal with opposite signs, we expect them to cancel out exactly. Works in Firefox. What went wrong? The padding rounds down and the margin rounds up, creating (as far as we can tell) a 1px difference. In the example, we expect the black and gray text to line up exactly (like they do in the inline-block example), but the gray text is offset by 2px relative to the black text. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 59.0.3047.0 Channel: canary OS Version: OS X 10.11.6 Flash Version: 21.0.0.213
,
Mar 22 2017
Unable to reproduce the issue on Windows-7,Mac-10.12.3 and Linux Ubuntu 14.04 using chrome stable version 57.0.2987.110 and canary 59.0.3047.0 with the steps mentioned in comment#0. Observed same behavior in Firefox too. Please find the attached screen cast and let us know if anything missed here to reproduce the issue. Thanks.
,
Mar 22 2017
The problem is you zoomed in by 250% and 500%. I just now reproduced it at normal 100% zoom with Chrome Canary 59.0.3048.0 on Mac-10.12.3, and used the System Preferences > (sidebar) Zoom > "Use scroll gesture with modifier keys to zoom" feature to zoom into the words "blah blah" to the right of the span. Another way this can be more noticeable is if JS is used to toggle `display: inline-block`, then everything to the right of the span shifts (this is how we discovered it). We figured JS would only complicate a test case for a CSS bug, but attached is a version with a button to toggle `display: inline-block`, and a video showing the "blah blah" on the right shifting when toggling the CSS (in Chrome Canary).
,
Mar 22 2017
Thank you for providing more feedback. Adding requester "sureshkumari@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Mar 22 2017
Actually, experimenting with the toggle so that it's noticeable, it varies by zoom level but can still happen at some large zoom levels: - 100%: fairly noticeable - 110%: even more noticeable - 125%: doesn't happen - 150%: barely noticeable - 175%: fairly noticeable - 200%: almost doesn't happen - 250%: doesn't happen - 300%: fairly noticeable - 400%: barely noticeable - 500%: doesn't happen
,
Mar 22 2017
> The padding rounds down and the margin rounds up We both round up, and that is probably the problem, we'll need to round down negative values, or in other words, round up in magnitude. -1.1 rounds up to -1 1.1 rounds up to 2 trunc() rounds down in magnitude, but there's no standard function that rounds up in magnitude. http://www.cplusplus.com/reference/cmath/trunc/
,
Mar 22 2017
and I can confirm on Windows.
,
Mar 27 2017
LayoutUnit::round always rounds away from zero if I call correctly. Perhaps we can use that? Another option would be to branch on the sign, we do that in a couple of places.
,
Mar 28 2017
,
Apr 2 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 4 2018
|
||||||||||||
►
Sign in to add a comment |
||||||||||||
Comment 1 by ajha@chromium.org
, Mar 22 2017