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:
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.Float the last item in a row to the right. That moves the rounding error in-between columns, where it is generally less noticeable.
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
Detect If Page Is Loaded Inside Wkwebview in JavaScript
Capture "Done" Button Click in Iphone's Virtual Keyboard with JavaScript
Expo' Is Not Recognized as an Internal or External Command
iOS 11 Getusermedia Not Working
Firebase Logout User All Sessions
Android Webview, Loading JavaScript File in Assets Folder
Webview Methods on Same Thread Error
CSS Overflow Hidden Increases Height of Container
How to Detect State of CSS Transition via Js and Skip It
Indicate That Processor-Heavy Js Function Is Running (Gif Spinners Don't Animate)
Why Do Arabic Characters Behave as Separate Characters When Styling Single Arabic Character
How to Get Default Font Size in Pixels by Using JavaScript or Jquery
How to Slow Down Scrolling Speed with JavaScript
Why Blocking Event Loop Does Not Block CSS Animation
Detect If Visitor Is on Index Page with Client Side Scripting
How to Set the Margin of an Object in Ie
Leaflet + Polymer 2 Map Loading with Distorted Tile However Works with Non-Polymer Code