How to Prevent Fractional Pixels in an Element with Width Set to Auto

How to prevent fractional pixels in an element with width set to auto?

I have found that if you use display: inline-table; instead of display: inline-block; it will force it to render exact pixel widths/heights. This may fix your issue however using table/inline-table will make the space within container collapse in some browsers so you would have to wrap the contents in another element.

Are the decimal places in a CSS width respected?

If it's a percentage width, then yes, it is respected:

#outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

<div id="outer">
    <div id="first"> </div>
    <div id="second"> </div>
    <div id="third"> </div>
</div>

How to prevent half-pixel SVG shift on high pixel ratio devices (Retina)?

iOS: You just need to add any CSS transform to the SVG element to fix it in Safari. For example .block_edge {-webkit-transform: scale(1); transform: scale(1)}.

Android: First you need to add a tiny CSS scale transform to the SVG element. When you do it, the <svg> and the <rect> elements will be rendered where they must be but the <rect> background will be repeated at the top and at the bottom:

To fix it you need to extend the pattern to the top and the bottom to prevent background repeating. Then you need to add a filled <rect> just above the top of the SVG to remove the last blank line at the top. There still will left a hardly visible dark grey line at the top in Android browser.

.common-bg {  background: #222;  fill: #222;}.block {  max-width: 300px;  margin: 20px auto;}.block_content {  height: 50.5px;}.block_edge {  display: block;    /* Fix. No more than 5 zeros. */  -webkit-transform: scale(1.000001);  transform: scale(1.000001);}

<div class="block">  <div class="block_content common-bg"></div>  <svg    class="block_edge"    width="100%"    height="10"    xmlns="http://www.w3.org/2000/svg"    version="1.1"    xmlns:xlink="http://www.w3.org/1999/xlink"  >    <defs>      <pattern id="sawPattern" x="50%" y="-1" width="20" height="12" patternUnits="userSpaceOnUse">        <path d="M 0 0 L 0 1 L 10 11 L 20 1 L 20 0 Z" class="common-bg"/>      </pattern>    </defs>    <rect x="0" y="-1" width="100%" height="1" common-bg="common-bg"/>    <rect x="0" y="0" width="100%" height="10" fill="url(#sawPattern)"/>  </svg></div>

Half pixel in border width size it is not showing

Theorically speaking, you can't do that because the pixel is the smallest physical unit used to display stuff on your screen ; however, you could want to do that for high resolution devices, like Retina and others.

CSS how to round of percent values to whole number pixel

Browsers round fractional pixels automatically - some up, some down; this is hard coded into the browsers so there's no way to force it to do one or the other with CSS.

A more indepth look at how different browsers treat fractional pixels can be found here.

How do I set the height of a parent to auto minus pixels?

Here is one way of doing it. Use position: relative to shift the #child element down by 20px;

On the #parent element, add margin-top: -20px to get the content's top edge to align to the
top edge of the parent block.

body {    margin: 0;}#parent {    overflow: visible;    border: 1px dotted blue;    margin-top: -20px;    overflow: hidden;}#child {    border: 1px dashed green;    position: relative;    top: 20px;}

<div id="parent">    <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus odio, ornare et neque in, sollicitudin ornare erat. Sed vel nisl vehicula, tempus nulla non, sodales orci. Pellentesque aliquam porttitor euismod. Nam imperdiet sit amet lectus sed vulputate. Sed varius vestibulum urna, quis consequat arcu mollis sed. Aenean pulvinar a magna non cursus. In hac habitasse platea dictumst. Proin elementum ipsum urna, non viverra nisi congue ut.</div></div>

can we change the CSS property, width, according to the screen width?

My question is can we set width to be a fraction of the current screen width

Yes, using Viewport Units

1vw = 1/100th of the width of the viewport.

MDN Reference

Support is IE9 and up

Force Chrome to use subpixel rendering for floats

Browsers round fractional pixels automatically and this is browser specific, some round it up, some down; There is no way to force it to do one or the other with CSS.

A solution could be to work with LESS, there are functions for that (ceil, floor).

But if you need a solution with CSS I would just suggest define the width as calc(100% - 0.5px) / calc(100% -1px) or 99.9%. That's just not perfect, but a solution. You can adjust it as you like and as it works for you.

But I'm not sure your problem comes from that.
Take a look at the following fiddle and tell me if it solves your problem. Instead of floating I use a layout based on display:inline-block here, and it seems like there is not such a problem.
https://jsfiddle.net/a693yj52/

---

Related Topics