Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make all instances of 99.9*% consistent. #309

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

Make all instances of 99.9*% consistent. #309

peterramsing opened this issue Jun 20, 2016 · 12 comments

Comments

@peterramsing
Copy link
Owner

@peterramsing 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
Copy link

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

@peterramsing
Copy link
Owner Author

@peterramsing 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
Copy link

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

@psamhaber
Copy link

@psamhaber psamhaber commented 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?

@peterramsing
Copy link
Owner Author

@peterramsing 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
Copy link
Contributor

@corysimmons 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
Copy link
Owner Author

@peterramsing peterramsing commented Nov 1, 2016

Closing for #332

@peterramsing
Copy link
Owner Author

@peterramsing 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
Copy link
Contributor

@corysimmons corysimmons commented Nov 6, 2016

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

@peterramsing
Copy link
Owner Author

@peterramsing 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
Copy link
Owner Author

@peterramsing 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
Copy link
Contributor

@corysimmons 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.