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

Vertical centering broken in Firefox 37.0.2 #183

Open
adelyte-austin opened this issue Apr 28, 2015 · 3 comments
Open

Vertical centering broken in Firefox 37.0.2 #183

adelyte-austin opened this issue Apr 28, 2015 · 3 comments

Comments

@adelyte-austin
Copy link

Given a minimal version of the Hello World tutorial, Firefox does not center the image vertically (see attached screenshot from Firefox 37.0.2).

<html>
  <head>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <script src="https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js"></script>
    <script>window.engine = new GSS(document);</script>
    <style type="text/gss">
      #cassowaryImg {
        height: == 250;
        width: == &[height] * 409/450;
        center: == ::window[center];
      }
    </style>
  </head>
  <body>
    <img id="cassowaryImg" src="http://gridstylesheets.org/assets/images/Intro/CassowaryBird.png"/>
  </body>
</html>

Strangely, Firefox centers the image properly when viewing the same code using CodePen, both in a frame and in isolation. Note that Firefox calculates the standalone and CodePen body heights as 0px.

IE 11, Chrome, Safari, and Safari iOS work fine.

screen shot 2015-04-27 at 11 51 31 am
@adelyte-austin
Copy link
Author

I can move this issue to GSS/document if that's more appropriate.

@paulyoung
Copy link
Contributor

Thanks @adelyte-austin! I think here is fine for now.

Do you see the same behavior if you do this?

<html>
  <head>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
  </head>
  <body>
    <img id="cassowaryImg" src="http://gridstylesheets.org/assets/images/Intro/CassowaryBird.png"/>
    <style type="text/gss">
      #cassowaryImg {
        height: == 250;
        width: == &[height] * 409/450;
        center: == ::window[center];
      }
    </style>
    <script src="https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js"></script>
    <script>window.engine = new GSS(document);</script>
  </body>
</html>

@adelyte-austin
Copy link
Author

Using your code in cross-browser tool it is still broken.

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
2 participants
@paulyoung @adelyte-austin