javascript - 嵌入谷歌地图时文本模糊

Question

这只发生在 chrome 上(也许所有 webkit 浏览器？)——当我像这样嵌入 map 时:

<iframe
    id="contactsMap"
    frameborder="0" 
    scrolling="no" 
    marginheight="0" 
    marginwidth="0" 
    src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>

它显示得很好，但如果我创建一个覆盖 map 的 div，则该 div 中的文本显示全部模糊(图像也一样)。

我尝试过的:

* {
  -webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide 
{ 
  -webkit-transform: none !important;
}

我还能尝试什么？

编辑 http://jsfiddle.net/31pxt917/

Answer 1

发生模糊是因为您正在使用 skew 转换，然后再使用 skew 返回。更好的方法是使用单独的 dom 元素或伪元素(:before 或 :after)。类似于 this fiddle

<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay"> 
    <div class="content">
        <span>some text goes here</span>
        <a href="#">a random link</a>
    </div>
</div>
</div>

#contactsMap {
    width: 100%;
    float:left;
    height:300px;
    position:relative;
}
.overlay{height: 300px;}

.overlay:before {
    content: '';
    display: block;
    width:100%;
    height:150px;
    background:#000;
    color:#fff;
    position:absolute;
    bottom: 0;
    -webkit-transform: skew(-9deg);
    -moz-transform: skew(-9deg);
    -o-transform: skew(-9deg);
    transform: skew(-9deg);

}
.content {
    top: 150px;
    height: 150px;
    width: 100%;
    position: absolute;
    padding: 5px 15px;
}
.overlay a, .overlay span {
    color:#fff;
}