Fixing Sub-Pixel Rounding Issue in a CSS Fluid Grid

Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

Stubbornella's OOCSS framework (links below) grids module deals with this by giving the last column the following overrides:

float:    none;
overflow: hidden;
width: auto;

This allows it to occupy whatever width remains within the container.

A bit of browser-forking (IE, ptzsch…) is necessary to get the same behaviour:
https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
https://github.com/stubbornella/oocss/wiki/grids

Columns, transforms and pixel rounding issue

It's caused because of transform: translate property miscalculation in browsers. Usually by changing object size, padding or margin by 1 or 2 pixels fixes this issue.

Try using width: calc(200% + 2px); for element with transform property.

1px gap in row using CSS Grid

Probably it is just a rounding error. See also: Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

You can avoid this by giving the last column in a row width: auto.

Children floating using percentages does not fill container 100% in Chrome

I see your problem. I guess it's rounding all the percentages the same way, so you have a noticeable change in total width when you float them next to each other.

In order to keep it to a maximum 1px total error, I'd make sure that all the right edges are defined from the main container and the last one touches the right edge, instead of relying on the browser compensating for rounding error. Check this out:

http://jsfiddle.net/9nZYt/1/

.progress {
position:relative;
border: 1px solid black;
box-sizing: border-box;
}
.progress .bar {
position:absolute;
left:0;
border-right: 1px solid white;
}
.progress .bar:first-child {
border-right:none;
}

.progress .bar.bar-remaining {
filter: none;
background: red;
}

and

<div class="progress">
<div class="bar bar-remaining" style="width: 100%"></div>
<div class="bar bar-remaining" style="width: 75%"></div>
<div class="bar" style="width: 50%"></div>
<div class="bar" style="width: 25%"></div>
</div>

You could target the individual divs with CSS's nth-child selector instead of hard-coding widths or special classes in your markup.

But it's still a bit ugly in my opinion, and you'll have to play a bit to get your rounded corners looking right again.

What about drawing it on a HTML5 Canvas and using this html-based version as a fall-back?

edit: I don't know anything about bootstrap, but hopefully this is still applicable!

Safari leaves a space on the right side with 100% width grid

This is a sub-pixel rounding error. It's common in any fluid layout, but becomes most obvious when you do the same math over and over (12 equal columns in a row). When you have a fluid layout, there are times when your container (as measured in pixels) doesn't divide evenly by the % you set. Say the viewport is 966px wide, and your columns are 10%. That means each column should be 96.6px wide. Browsers just don't know what to do with that partial pixel. If you resize your container, you'll see that the layout jumps now and then, and lines up exactly right when the container is evenly divisible.

It's an old problem, and browsers have mostly been getting better at handling it. IE used to round up, which caused even worse layout problems. Now, most browsers are smarter about it, but Safari still rounds down.

There's no way to fix the problem entirely. There are no pixel-exact, fluid, floated layouts, but there are several work-arounds. I start with the simplest, and work my way through the list:

  1. When possible, avoid repetitive percentages. Any one element will only ever round down a partial pixel, meaning you never have more than 1px error at a time. If you don't stack the errors, they are easier to hide.

  2. Float the last item in a row to the right. That moves the rounding error in-between columns, where it is generally less noticeable.

  3. If you really can't minimize or hide the errors, in a gallery-style layout for example, try Jon Albin Wilkins' float isolation method. It's a bulky approach, so I don't recommend it everywhere, but it can be real helpful in some cases. Layout systems like Susy and Singularity will also give you that as an option.

With a combination of those techniques, you can keep all your rounding errors to a single pixel. If your designs can't handle a single pixel rounding error, you shouldn't use fluid floats, or you should maybe consider the Dao. :)

Percentage Widths & 1px Borders

You can use overflow:hidden;. write like this:

nav {
float: left;
width: 25%;
background-color: blue;
}
article {
overflow:hidden;
background-color: red;
}

Check this http://jsfiddle.net/HXyZ7/7/



Related Topics



Leave a reply



Submit