Databases
StackOverflow2013
Postsdbo
POIs it possible to "snap to pixel" after a CSS translate?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it possible to "snap to pixel" after a CSS translate?
    primarykey
    data
    text
    <p>I created a modal box and vertically centred it using a <a href="http://css-tricks.com/centering-percentage-widthheight-elements/" rel="noreferrer">technique Chris Coyer mentioned</a>. 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?</p> <p><strong>Update</strong></p> <p>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:</p> <p><img src="https://i.stack.imgur.com/xiP6K.jpg" alt="Modal box with crisp lines"></p> <p>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.</p> <p><img src="https://i.stack.imgur.com/XbPxP.jpg" alt="enter image description here"></p> <p>Although the second image doesn't show it, occasionally I notice the top and bottom white lines wit the same blurred effect.</p> <p>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:</p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJames Long
    1. USJames Long
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIs it possible to "snap to pixel" after a CSS translate?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you describe what you mean by "the children look a little wonky"? Are you talking about antialiasing problems? Can you show us a screenshot or reproduce the problem in jsFiddle?
      singulars
      1. POIs it possible to "snap to pixel" after a CSS translate?
      1. USbrianpeiris
    2. CO@brianpeiris I've added pictures to better explain the question
      singulars
      1. POIs it possible to "snap to pixel" after a CSS translate?
      1. USJames Long
    3. COHonestly, the differences are barely perceptible to me. I used an image comparison tool and there are actually more differences in the compression artifacts than actual differences (because you saved the screenshots as JPEGs). It would be easier to answer your question if you reproduced it in jsFiddle.
      singulars
      1. POIs it possible to "snap to pixel" after a CSS translate?
      1. USbrianpeiris
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload