Gotcha - display:none w/ intrinsic measurements

[jasonkuhrt]

When the page loads the layout is thus:

Then, given a tug on the window size (any which way), gss lays out correctly:

See failing case at: http://jasonkuhrt.github.io/sandbox/

The gss code in question is:

body, html {width: 100%; height: 100%; margin: 0; padding: 0;}

html {
  font-size: 24px;
  text-align: center;
  font-family: Helvetica;
}

.box {
  center-x: == ::window[center-x];
  center-y: == ::window[center-y];
  width: <= ::window[width] / 2;
  height: == ::this[intrinsic-height];
  background: red;
  color: white;
}

[jasonkuhrt]

Has anyone observed this exact same layout quirk?

[jiko]

I tried this in Chrome and observed the same.

[d4tocchini]

Here's a JSFiddle of your example, it works there as it should.

Looks like it could be the

html:not(.gss-ready){ display: none; }

display:none kills measurement information so when GSS tries to measure the height of the button it gets 0, when the screen is resized measurements are valid and the button moves up by about half its height . Try opacity:0

[d4tocchini]

Whoops, use this JSFiddle link:

http://jsfiddle.net/v7u6N/7/

[jasonkuhrt]

@d4tocchini Ok, I updated the example at http://jasonkuhrt.github.io/sandbox/ and indeed it works fine if using the opacity: 0; technique.

Is this considered a valid gotchya (that just needs to be noted in a GSS guide) or should this be considered a bug?

[d4tocchini]

Unfortunately there's no way around this without completely ditching the DOM, so it's Gotcha not a bug.

Planning on adding a Gotcha section to the site...