Border width is not calculated and rendered correctly
Reported by
jakub.fr...@gmail.com,
Feb 25 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 Steps to reproduce the problem: 1. Create new block element. 2. Put border 5px style on it (also breaks for every integer not divisible by 4). 3. Look at div's border width in inspector - it's calculated as 4.8px (for 5px test case). What is the expected behavior? Rendered border width should be the same as written in CSS, especially for values without floating point. What went wrong? Border's width was not rendered properly (as seen on screenshot in attachment) - can't say what caused it. Did this work before? N/A Does this work in other browsers? No Firefox - also borders are displayed incorrectly - test case shows 4.8px of border's width. In Edge it's okay. Chrome version: 56.0.2924.87 Channel: stable OS Version: 10.0 Flash Version:
,
Feb 27 2017
I can't reproduce this on 56.0.2924.87 / Mac Retina or Linux.
,
Feb 27 2017
That's weird, on my machine (win 10 Home, ver 1607, build 14393.693 64 bit) the bug is still there. Is there any more info about my environment that I could provide you with to help in tracking the error?
,
Feb 27 2017
The issue here is that the page is zoomed it to 125%. window.getComputedStyle($0).borderWidth gives me 4.8. Looks like we are trying to render border with the counting number of pixels and work it back to show as computed. For 125% zoom, we have: Math.floor(5 * 1.25) / 1.25 == 4.8 Chris, what do we expect here?
,
Feb 28 2017
Adding another test case - element's sizes & paddings & margins are rendered differently (correctly) what causes some weird positioning errors to happen. Here: width on first element and border-left on second are both 51px but because of this strange border-connected behaviour border is shown as 50.40px (b_boxModel.png) and part of the black element (which should be overlapped by yellow one) can be seen (result.png). BTW I think that's not only bug of devTools component.
,
Mar 8 2017
I think you should report a rounded border. Borders widths are rounded during painting: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/paint/BoxBorderPainter.cpp?q=boxborderpainter.cpp&sq=package:chromium&dr&l=283 The painted position of the boxes is pixel-snapped (via pixelSnappedIntRect()): https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/paint/BoxBorderPainter.cpp?q=boxborderpainter.cpp&sq=package:chromium&dr&l=1009
,
Oct 4 2017
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by nyerramilli@chromium.org
, Feb 27 2017