Make all instances of 99.9*% consistent. #309

Closed
peterramsing opened this Issue Jun 20, 2016 · 12 comments

Comments

Projects
None yet
4 participants
@peterramsing
Owner

peterramsing commented Jun 20, 2016

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 #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 #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.

@metaloha

This comment has been minimized.

Show comment
Hide comment
@metaloha

metaloha Aug 24, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Aug 24, 2016

Owner

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.

Owner

peterramsing commented Aug 24, 2016

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.

@metaloha

This comment has been minimized.

Show comment
Hide comment
@metaloha

metaloha Aug 24, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@psamhaber

psamhaber Sep 12, 2016

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?

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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Sep 12, 2016

Owner

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.

Owner

peterramsing commented Sep 12, 2016

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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Sep 13, 2016

Contributor

@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... 😒

Contributor

corysimmons commented Sep 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 1, 2016

Owner

Closing for #332

Owner

peterramsing commented Nov 1, 2016

Closing for #332

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 6, 2016

Owner

@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.

Owner

peterramsing commented Nov 6, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Nov 6, 2016

Contributor

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

Contributor

corysimmons commented Nov 6, 2016

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

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 6, 2016

Owner

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.

Owner

peterramsing commented Nov 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Nov 7, 2016

Owner

@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.

Owner

peterramsing commented Nov 7, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@corysimmons

corysimmons Nov 7, 2016

Contributor

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.

Contributor

corysimmons commented Nov 7, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment