Translated div cuts off input borders
Reported by
colin.de...@gmail.com,
Apr 6 2016
|
||||
Issue descriptionChrome Version : 49.0.2623.110 m URLs (if applicable) : https://jsfiddle.net/jg5gr6ht/2/ Other browsers tested: Add OK or FAIL, along with the version, after other browsers where you have tested this issue: Firefox: OK IE: OK What steps will reproduce the problem? (1) Have an absolutely positioned div with left/top set to 50% with an odd height/width (2) Transform: translate(-50%, -50%) on that div (3) Have a text input inside of that div What is the expected result? The borders of that input appear as they should What happens instead? With an odd height/width, the top/left border isn't shown. Please provide any additional information below. Attach a screenshot if possible.
,
May 1 2016
,
May 1 2016
,
May 2 2016
This is intentional and due to the fact that layout snaps to device pixels while transforms do not. Mixing the two is a bad idea and will lead to subpar rendering like this. |
||||
►
Sign in to add a comment |
||||
Comment 1 by tkonch...@chromium.org
, Apr 29 2016Components: Blink>CSS
Labels: M-52 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)