Menu
I created a modal box and vertically centred it using a technique Chris Coyer mentioned. The only problem I've found with it so far is that sometimes the box is offset by half a pixel, which can make some of the children look a little wonky. My question is,: is it possible to snap the result to the nearest whole pixel?
Update
Here are a couple of pictures to better illustrate the issue. In this first image, you can see the text inputs and link underlines have rendered correctly:
The second image shows the effect after the CSS transforms have been used. Notice the blur of the link underline and the incorrectly rendered text inputs.
Although the second image doesn't show it, occasionally I notice the top and bottom white lines wit the same blurred effect.
For the record, the text inputs are styled using simple borders and a background colour. I've included the CSS for those inputs here so you can see there's nothing special happening:
input { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 0; box-shadow: 0 1px 3px -1px #D5D5D5 inset; color: #4C4C4C; display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 12px; max-width: 100%; padding: 5px; transition: border-color 0.1s ease 0s; } 
362
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
We can use translate in CSS transitions and animations. That means we can transition from one place to another, say, when the element is hovered. If you look at the browser support closely, you may want to consider a fallback solution that works with other browsers until translate property gets full browser support.
dropdown-menu-center in the exact middle, with the center of the element being right of that (specifically, half of the page width plus half of the element width ). This is countered with transform: translate(-50%, 0); , which moves the element left by 50% of its width .
The term CSS pixel is synonymous with the CSS unit of absolute length px — which is normatively defined as being exactly 1/96th of 1 inch.
The only bulletproof solution is to ensure that your element occupies an even number of pixels. If the height (or width) is not divisible by 2, then it will attempt to render your element on a half-pixel, causing the blurriness.
Firefox doesn't have this issue because it supports true subpixel rendering. So, even though your element is on a half-pixel, Firefox handles it elegantly.
In my experience, Webkit typically snaps elements to the nearest pixel –– (for instance, when using the letter-spacing property) -- so it's kinda strange that it doesn't behave the same way for translate.
112
In some browsers you can avoid 3d transforms and use 2d transforms instead, the translation will snap to pixels by default:
transform: translate(-50%, -50%); 
transform: translate3d(-50%, -50%, 0); 
JSBin: http://jsbin.com/epijal/3/edit
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
