Centering with CSS transform: translateX/Y causes blur issues and gaps between elements
Reported by
edaa...@gmail.com,
May 24 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 Steps to reproduce the problem: 1. Open the following jsFiddle: https://jsfiddle.net/dg77zgoo/4/ 2. The tiny gap between the 2 elements should be instantly visible. 3. Click on an element to see the blurry text on animation. I was able to reproduce the blur issue by setting z-index:-1 in this specific scenario. Although in my own projects the z-index doesn't seem to matter. The blur issue happends without animations also. Where changing the element's position with 1px will remove the blur issue and 2px off positioning will return the blur issue again. All related to translateX(-50%) and translateY(-50%). What is the expected behavior? 2 elements align without gap. Text remains clear on click animation. What went wrong? Tiny gap between 2 elements. Text blurs on click animation (gap disappears). Did this work before? No Does this work in other browsers? Yes Chrome version: 66.0.3359.181 Channel: stable OS Version: 10.0 Flash Version: Screenshot: Left: Internet Explorer 11, right is Chrome
,
May 24 2018
Bisect info: 422674 (good) - 422681 (bad) https://chromium.googlesource.com/chromium/src/+log/bf5f2536..88622215?pretty=fuller Suspecting r422680 = 234079c8f5478894d70b6899a7461caa7062504d = https://crrev.com/2386263002 by chrishtr@chromium.org "Don't pixel-snap box size before applying percentage transform to it." Landed in 55.0.2881.0
,
May 24 2018
,
May 24 2018
,
May 25 2018
My guess is that the crack appears when not composited, animating causes composition and the gap disappears, but composition causes the loss of sub-pixel text so it blurs (or maybe because we are scaling a fixed image). So this is probably a standard sub-pixel position does not apply to some elements problem.
,
May 29 2018
schenney is correct in comment 5. Transforms happen post-layout and as such the elements are not aligned with the pixel grid. This is by design. If you want crisp text and consistent alignment use layout-affecting primitives instead of transforms.
,
May 29 2018
FIREFOX: CLEAR AND NO GAPS IE 11: CLEAR AND NO GAPS IE EDGE: CLEAR AND NO GAPS CHROME: BLURRY AND GAPS, but hey, it's by design. I do not agree with your vision of the problem and the "won't fix". It's the easy route for a clear render issue.
,
May 29 2018
Why even implement transforms if they are not consistent? Maybe better remove the whole CSS3 transform option in Chrome if it's so buggy. The top:50%, translateY(-50%) (or left:50%, translateX(-50%)) IS the perfect and only consistent answer for abstract center alignment in every scenario. With primitive pure CSS lay-outs alignments (especially vertical alignments) are not so evident. I can show you different scenario's where an abstract alignment solution with primitivies won't work. That's why in some cases the only consistent often used solution is display: table-cell. And with this choice you will also be bound to other undesirables.
,
May 30 2018
A work-around can be achieved with flexbox positioning (align-items:center, justify-content:center) when there is control over the content container. However with abstract widgets (building blocks) you do not always have control over the wrapper when your widget content gets rendered. In addition this work-around always needs this extra wrapper element. CSS transform remains the best abstract solution for centering IMO.
,
May 31 2018
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by edaa...@gmail.com
, May 24 2018