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.

Sign up for GitHub

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

Jump to bottom

Susy aligning contents different in Chrome #495

Closed
krzkrzkrz opened this issue Jun 26, 2015 · 2 comments
Closed

Susy aligning contents different in Chrome #495

krzkrzkrz opened this issue Jun 26, 2015 · 2 comments

Comments

@krzkrzkrz
Copy link

I created a simple layout. All displays fine in Firefox, but not in Chrome. The differences get noticeable with the aside and article elements.

I am guessing, it has something to do with Chrome handling sub pixel rounding. If so, how do I go about this?

I attached screenshots from Firefox and Chrome below.

// css
.side-navigation     { @include span(2 of 16); }
.content             { @include span(14 of 16 last);
  .top               { @include span(14 of 14 last); background-color: $prototype-amber; }
  .center            { @include span(14 of 14 last);
    aside            { @include span(7 of 14); background-color: $prototype-pink; }
    article          { @include span(7 of 14 last); background-color: $prototype-teal; }
  }

}

// html
<body>
  <aside class="side-navigation">
    side navigation
  </aside>

  <main class="content">
    <section class="top">
      top
    </section>

    <section class="center">
      <aside>aside</aside>
      <article>article</article>
    </section>
  </main>
</body>

Firefox:
screen shot 2015-06-26 at 11 41 10 pm

Chrome:
screen shot 2015-06-26 at 11 41 27 pm
@mirisuzanne
Copy link
Member

You don't need to do anything. It's working fine, but the background grid image is not reliable in all browsers. Turn that off and you'll see that both layouts are identical. Resize the browser and the grid image will shift. See #473 and #440.

@zellwk
Copy link
Contributor

zellwk commented Jun 26, 2015

@krzkrzkrz This is due to how browsers render subpixels (pixels lesser than 1px). Chrome and Safari round them down while Firefox renders subpixels perfectly. That's why the grid looks slightly wrong on Chrome.

@zellwk zellwk closed this as completed Jun 26, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mirisuzanne @krzkrzkrz @zellwk