Invalid position with CSS properties "translateX" and "translateY"
Reported by
nob...@gmail.com,
May 25 2018
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Example URL: https://embed.plnkr.co/1NjkOrx868XdFkfH2bHv/ Steps to reproduce the problem: Set CSS properties: position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); What is the expected behavior? Red pixels width is equal What went wrong? Red pixels width is not equal 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? N/A Chrome version: 66.0.3359.181 Channel: stable OS Version: 10.0 Flash Version:
,
May 27 2018
,
May 29 2018
Chrome snaps subpixel values to the device grid to ensure crisp rendering, this happens at layout time. Transforms apply *after* that. Mixing layout and transforms like this will reuslt either in blurry rendering or inconsistent sizing. Please either use layout concepts (width/height/top/left) or transforms for both axies for consistent rendering. See https://trac.webkit.org/wiki/LayoutUnit for further details. |
|||
►
Sign in to add a comment |
|||
Comment 1 by dtapu...@chromium.org
, May 25 2018