Google Map v3 Initializing with horizontal gray line w/ Foundation in Chrome

Question

Seems to be CSS related because initializing the map in a simple HTML page works just fine. I have added suggested CSS to fix known issues (below), but can't seem to get rid of this.

#map {
    *, *:before, *:after {
        -moz-box-sizing: content-box!important;
        -webkit-box-sizing: content-box!important;
        box-sizing: content-box!important;
    }
    img {
        max-width: none;
        height: auto;
    }
    label {
        width: auto;
        display: inline;
    }
}

Answer 1

For anyone else looking for a temp solution for this bug:

CSS

.map *, .map *:before, .map *:after {
    -webkit-transform: none !important; 
}

SASS

.map {
  *, *:before, *:after {    
    -webkit-transform: none!important;
  }  
}

Answer 2

It seems to be a rendering bug with Chrome (I can replicate it in v 34.0.1847.131), rather than with your CSS. It's been fixed in Canary (v 36.0.1973.2 canary).

According to this bug thread on gmaps-api-issues:

The fix is in Chrome 35, which is currently scheduled for release in mid-May (you can switch to the beta channel to get the fix now or verify it in a Canary build - http://www.chromium.org/getting-involved/dev-channel).

Until then, like @user699242 suggested, removing any heading tags (h1, h2, etc.) in your page seems to fix it. Of course, that's semantically unappealing though, might be better just to wait.