Make all instances of 99.9*% consistent.

[peterramsing]

Is this a feature request or a bug report?

• Chore

What is the current behavior?

• Some instances fo 99.9*% have not been updated as change size from 99.99% to 99.9% to avoid rounding errors in Edge and IE #299 didn't change those in Offset, Move, etc.

What is the behavior that you expect?

• All uses of 99.9% to be the same unless there is a reasoning behind them being different.

What's the motivation or use-case behind changing the behavior?

• Code consistency especially since change size from 99.99% to 99.9% to avoid rounding errors in Edge and IE #299 makes a change in this area.

Anything else?
Don't want to get too nit-picky. This is just a minor personal issue that I'd like to clean up.

[russelporosky]

Can this be set to 99.99%? Add the hundredths place removes a single pixel vertical line I've been noticing on the far right of my columns in some circumstances in Chrome.

[peterramsing]

Hmmm. Shoot.

I think this is going to be a constant moving target. @metaloha could you share where you're having this issue so I can see specifically where it might be?

I'll put it on my TODO list to check out the latest in pixel rounding in the latest browsers.

[russelporosky]

It is visible in the latest Chrome on OSX by simply creating a 2-column flex grid with no gutter and with a solid background colour. The 2 columns don't quite add up to 100%, leaving a single pixel of space on the far right in the browser's default colour. I believe I noticed this same thing in Firefox on OSX as well, but haven't double-checked it.

[psamhaber]

Same here, two-col flex grid with no gutter with 100% wide images in each:
The columns have a small but noticeable gap in between at certain viewport widths, in chrome+safari. Changing to 99.99% has the same gap though.

I suppose the 99.9% (vs 100%) are necessary for IE? Is this still really needed?

[peterramsing]

I'll be honest that right now I'm completely swamped with work so I have not given this as much time as I'd like.

I have been doing some testing of the pixel rounding issues. I'm going to look at the support issue, as @psamhaber mentioned.

Where I have found this to be a trouble area is when you have multiple nested columns. 1/2 => 1/2 => 1/8 (I've seen it in several places in navbars, etc). This is where I've seen the pixel rounding needed most of all but each browser treats it differently. Safari has been causing some of those issues lately but it wasn't on the latest version.

So then the question is whether or not the next version of LostGrid will support those older versions of Safari. There are reasons to move on for sure.

[corysimmons]

@psamhaber The 99.99% stuff is needed for Edge -- a pretty relevant browser by a team who consistently doesn't play along with every single other browser (including their own old browsers).

In my tests (throwing tons of stuff/nested stuff) at it, 99.9999% seems to work well. But #295 happened.

Maybe this should revert back to 99.99% so people using humanoid browsers can enjoy Lost and people worried about Edge not crapping the bed can set @lost-rounding-percent 99.9%?

You're right though, this will always be a moving target since browsers are absolutely incapable of coming to common ground on how to divide a pixel... 😒

[peterramsing]

Closing for #332

[peterramsing]

@metaloha @psamhaber Give this release a try: https://github.com/peterramsing/lost/releases/tag/v8.0.0-beta.1

You can fine tune the "rounder" or the percentage of width with lost-column-rounder: 100; or a more custom variant.

[corysimmons]

You offering 2 rounder settings (1 for gutterless, 1 for gutter)?

[peterramsing]

Just a global and per rule. I suppose it could be expanded to a gutter and gutter-less. Off the top of my head I'm not sure the need for both but I haven't tested out all that the param has to offer just yet.

[peterramsing]

@corysimmons Now I think I get it. ...because this is mostly issues if you don't have gutters?

...okay, now I'm thinking on it some more.

[corysimmons]

If gutter === 0 then you get slightly different calc formulas, but 100% still doesn't work great on everything so I settled on 99.99999% as it hit the most browsers.

If gutter > 0 you need a different formula, and with it 99.99% seemed to work the best.

So you'd need 2 rounder settings. One for each of those formula types.

It'd need to be set globally, as well as locally.