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

99.99% rounding issue in Edge #295

Closed
dotnetCarpenter opened this issue May 26, 2016 · 2 comments
Closed

99.99% rounding issue in Edge #295

dotnetCarpenter opened this issue May 26, 2016 · 2 comments

Comments

@dotnetCarpenter
Copy link
Contributor

Is this a feature request or a bug report?
Bug report

What is the current behavior?

lost_edge
Edge

lost_ie11
IE11

If it's a bug please provide the steps to reproduce it and maybe some code samples.

<section class="f-row f-row_12">
    <div class="f-row__cell-8"><p>This is a long cell spanning 8 cells</p></div>
    <div class="f-row__cell-4"><p>This is a short cell spanning 4 cells</p></div>
</section>
@lost gutter 3.4rem;
html {
  box-sizing: border-box;
  /* Change 1 rem to mean 10px in a standard browser */
  font-size: 62.5%;

  lost-center: 192rem;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.f-row {
    lost-flex-container: row;
    width: 100%;
}

.f-row::after {
    lost-utility: clearfix;
}

.f-row__cell {
    lost-column: 1 flex;
}

.f-row_12 .f-row__cell-4 {
    lost-column: 4/12 flex;
    background-color: hsla(1, 73.7%, 38.8%, .5);
}
.f-row_12 .f-row__cell-8 {
    lost-column: 8/12 flex;
    background-color: hsla(0, 0%, 20%, .5);
}

Open IE or Edge with the above HTLM/CSS and resize the browser window a bit. You should see the second cell (f-row__cell-4) jump beneath the first cell.

What is the behavior that you expect?
That both cells are on the same row/line.

lost_opera
Opera

What's the motivation or use-case behind changing the behavior?
Fixing our grid which is based on lost. Firefund/styleguide#109

What version of LostGrid, browser and browser version are affected by this issue? Did this happen in previous versions?
Lost: 6.8.0
Edge: 25
IE: 11

Anything else?
I will work on a PR which set the width of lost-column to 99.9% instead of 99.99%.

@peterramsing
Copy link
Owner

Closing for #296

dotnetCarpenter added a commit to dotnetCarpenter/lost that referenced this issue May 31, 2016
@peterramsing peterramsing reopened this May 31, 2016
peterramsing pushed a commit that referenced this issue Jun 1, 2016
… IE (#299)

* change size from 99.99% to 99.9% to avoid rounding errors in Microsoft Edge and IE - fixing #295

* update test to pass in the beta branch
@peterramsing
Copy link
Owner

Closed by #308

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

Successfully merging a pull request may close this issue.

2 participants