Scale transform causes gap rendering with flex layout
Reported by
jaredbur...@gmail.com,
Jun 14 2017
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Example URL: https://codepen.io/Ghazgkull/pen/awmYpE Steps to reproduce the problem: 0. See codepen for very simple example code. 1. Create 3 divs inside a flex container that render as evenly spaced columns. Everything renders fine. 2. Apply a scale transform to shrink the container (e.g. transform: scale(0.7). 3. At this point, very thin gaps become visible between the divs. What is the expected behavior? The scaled divs should render without any gaps, just as they do without scaling. What went wrong? When the flex layout container is scaled, very thin gaps become visible between its content boxes. Attaching a screenshot of what I see rendered in Chrome using the Codepen example above. Safari shows the same issue. Firefox doesn't. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 58.0.3029.110 Channel: stable OS Version: OS X 10.12.5 Flash Version:
,
Jun 15 2017
This is Mac only, and does not reproduce on Windows at 200% HighDPI setting. We've enabled DPI as zoom on Windows but not Mac, as far as I know, so maybe that's the distinction. This might magically go away when we convert.
,
Jun 18 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
,
Jun 18 2018
|
||||
►
Sign in to add a comment |
||||
Comment 1 by chrishtr@chromium.org
, Jun 15 2017