Several consequence wide svg-images with fractional height has random alignment
Reported by
pfigh...@gmail.com,
Feb 14 2018
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Steps to reproduce the problem: Open https://plnkr.co/edit/qpTwxJMkDmjJ8JWK3UN1?p=preview What is the expected behavior? All circles should has equal ident What went wrong? Circles has random ident, that depends on: 1) svg vieport width 2) image height (14.1..14.9) 3) way to add svg to page - <img> or inline <svg> Did this work before? N/A Does this work in other browsers? N/A Chrome version: 64.0.3282.140 Channel: n/a OS Version: 6.3 Flash Version:
,
Feb 14 2018
Updated plunkr, its repro with 1.3em. https://plnkr.co/edit/cAWaJnCc8qZ0djM4LgCe?p=preview
,
Feb 14 2018
,
Feb 14 2018
Interestingly looks right at 125% zoom. I agree that there seems to be no good reason for rows to get different offsets. At some point I'll figure out why and see if we can do better.
,
Feb 15 2018
Discovered, that in Chrome 56.0.2924.87 does not repro.
,
Feb 15 2018
At 1.25x, 14.3px will be 17.875px "zoomed", which can be represented without precision loss by LayoutUnit. I'd suspect it's the various rounding errors and losses of precision (both intentional and not) that yields this end result. The aspect ratio from the (wide) SVG here is 320:12, which is also not possible to represent exactly for instance - and that will have to be applied to the 14.3px to get the width. Also, IIRC, that computation (the layout) is done with LayoutUnits which when we later paint we snap to pixels (ints) meaning we get a discrepancy in "viewport" the SVG is painted in.
,
Feb 19 2018
Hey, I found solution. Just add preserveAspectRatio="xMinYMin meet" See there https://plnkr.co/edit/X2kViPNJzrJpumYEXiRU?p=preview |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by pfigh...@gmail.com
, Feb 14 2018