Vertical centering broken in Firefox 37.0.2

adelyte-austin commented 9 years ago

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 commented 9 years ago

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

paulyoung commented 9 years ago

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 commented 9 years ago

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

gss / engine

Vertical centering broken in Firefox 37.0.2 #183