Search code examples
cssimage-resizing

Force Chrome to use subpixel rendering for floats

I am trying to have 8 images floated by each other with 

width: 25%; 
float: left;

Here is a fiddle: https://jsfiddle.net/y06z0em1/

If you resize the section that the images are in, you will see that there are times when it breaks because some of the images are off by a fraction of a pixel. Could I ever change make it so that every pixel always rounds up or down?

Thanks!

Solution

  • 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/