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

Comments

Projects
None yet
2 participants
@dotnetCarpenter
Contributor

dotnetCarpenter commented May 26, 2016

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

dotnetCarpenter added a commit to dotnetCarpenter/lost that referenced this issue May 26, 2016

@peterramsing peterramsing self-assigned this May 31, 2016

@peterramsing

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing May 31, 2016

Owner

Closing for #296

Owner

peterramsing commented May 31, 2016

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 added a commit that referenced this issue Jun 1, 2016

change size from 99.99% to 99.9% to avoid rounding errors in Edge and…
… 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

This comment has been minimized.

Show comment
Hide comment
@peterramsing

peterramsing Jul 5, 2016

Owner

Closed by #308

Owner

peterramsing commented Jul 5, 2016

Closed by #308

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