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

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;  }  }

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.

Seems like it has something to do with the following which is added inline to images by Google:

-webkit-transform: translateZ(0px)

Finally narrowed it down to h tags. If I removed all the h tags (h1, h2, etc.), the gray line disappears. So, seems like a Chrome bug (v 34.0.1847.116).